uniapp_uniapp支付 - CSDN
  • uniapp实战开发商城APP和小程序

    千人学习 2020-03-31 10:59:37
    课程包含Uniapp开发全端教程,课程由英特网络独家录制,购买课程后赠送后端CMS管理系统,可以修改商品及接口数据,同时CMS提供Uniapp所需要的全部API接口,包括课程内容:安卓证书申请/APP苹果打包/APP安卓打包/微信...
  • uni-app 从入门到放弃(持续更新)

    万次阅读 2019-06-11 19:52:29
    最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...1....

    最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...

    1.搭建环境

    上官网安装一下开发工具

    这里送上连接 www.dcloud.io/hbuilderx.h…
    然后需要安装微信开发者工具 最好用最新的

    如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

    然后用开发工具 创建一个模板

    2.使用vuex

    uni-app已经内置vuex 不需要再安装了 

    在根目录下新建store文件 在其目录创建index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		text: 'demo'
    	},
    	mutations: {
    		SetText(state, v) {
                        state.text = v
                    }
    	},
    	actions: {
    		setText: function({commit}, v) {
                            commit('SetText', v)
                    }
    	}
    })
    
    export default store 复制代码

    然后在main.js入口文件

    import Vue from 'vue'
    import App from './App'
    
    // 这里引入store
    import store from './store'
    
    // 这里是重要的一步 这里不写 app会找不到store
    Vue.prototype.$store = store
    
    const app = new Vue({
    	store,
    	...App
    })
    app.$mount()复制代码

    3.配置

    打开manifest.json 这里是可视化的



    mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置


    如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了

    4.HBuilderX 1.9.8的坑

    首先是onLoad生命周期 调用路由的api会报错

    navigateTo with an already exist webviewId 1  复制代码

    如果出现这个错 解决办法就是延迟

    setTimeout(() => {
        uni.switchTab({
            url: '这里是路径'
        })
    }, 400)复制代码
    官方说在1.9.9+版本会修复

    5.获取节点

    支持微信小程序 H5 APP 其他没有测试

    uni.createSelectorQuery()
    // 官方说自定义组件模式 要这样写
    uni.createSelectorQuery().in(this)复制代码

    这里需要注意一点 要在onReady这个生命周期里面才能获取到

    6.swiper的高度问题

    大家如果写过微信小程序的话都知道swiper是要写一个高度的,而uni-app等于也是一个加强版的小程序,swiper也要写高度,但我们都不太能确定高度,只能用一些办法来确定它的高度

    第一种办法就是已知item的高度,在获取数据后,用item的高度*item的数量获得高度

    第二种就是用节点获取高度,我自己就用这个办法,亲测app跟微信小程序都ok

    // 先在swiper组件写上动态style来获得高度
    <swiper :style="{height: `${swiperHeight}px`}">
        <swiper-item v-for="(item,index) in tabList" :key="index">
            <div :class="columnList[index]"></div>
        </swiper-item>
    </swiper>
    
    // 这里的class 我一开始是用字符串模板来实现`columnList${index}`
    // 跑是能跑起来 但是会报错 忍不住自己就不用字符串了
    // 接着使用fun的办法 但是uni-app不支持这种写法
    // 后面想着用tabList的长度来初始化一个columnList (这个办法有点笨,如果有人有更好的办法,请告诉我这个菜鸡)
    
    // 书写一个获取节点的方法
    get_wxml(className, callback) {
        uni.createSelectorQuery().select(className).boundingClientRect(callback).exec()
    }
    // 在onReady生命周期里面获取高度
    onReady() {
        this.get_wxml(这里写你要获取的节点,我这里是我定义的columnList[index], (rects) => {
    	this.swiperHeight = rects.height
        })
    }复制代码

    7.条件编译

    多端开发肯定避免不了存在跨端的差异性,uni-app也提供了条件编译功能

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在

    写法如下

    #ifdef APP-PLUS
    需条件编译的代码
    #endif
    APP-PLUS是指app端的 还有更多端的 我这里提供链接 查询uniapp.dcloud.io/platform

    优化建议

    建议使用自定义组件模式

    每次data改变都会重新渲染视图,一些不是视图的变量,可以考虑定义在data外面

    写组件的时候避免多层嵌套,建议3 4层还最佳

    建议用vuex来管理数据,如果想要在app更好的性能可以使用nvue来开发

    开发体验

    uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了

    关于app调试的时候没有打印出来,那个时候内心是绝望的,升级到1.9.7后就有了,但也不推荐大家盲目的升级,升级之后总有一些奇奇怪怪的bug,比如最近onload的问题

    我还在一边踩坑一边分享,所以这个文章会一直更新


    转载于:https://juejin.im/post/5cdcbb8f5188256001481114

    展开全文
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
    uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手uni-app。

    uni-app使用的是vuejs的语法,所以会vuejs的朋友就可以跳过学习语法这一步了,还不会vuejs的朋友也不要紧,可以先去vue官方文档看看,vue的文档可以说非常通俗易懂了,如果你有遇到前端方面的问题或者需要一些前端学习资料可以加q群:682783851。下面就假设大家都会vuejs了。

    首先,我们已经知道uni-app是用来制作一个跨平台应用的,所以,在开始之前,我们一定要知道uni-app是如何打包到多个平台的,使用uni-app开发,我这里是建议大家使用官方的开发者工具的,官方工具也非常好用,对于一些配置项非常方便,可以省去很多麻烦,使用开发者工具我们就知道了,uni-app跨平台都是开发者工具来完成编译的。
    那么对于多个平台,是不是只需要看一端就行了呢?答案是否定的,uni-app对百分之90的样式是完全跨平台的,对于一些特殊的,因为每个平台要求不一样,所以我们要使用条件编译来做适配,另外对于一些第三方授权登录或者支付功能每个平台也有所不同。这里我们注意要使用条件编译,重要点是一定要注意每个平台对组件或接口的兼容性
    另外,需要注意的是uni-app中对vue语法的兼容性,使用 Vue.js 注意事项
    了解上面的两点之后,我们就可以开始创建一个项目了,打开hbuilder X,左上角文件-新建-项目,可以选择uni-app的模板学习一下,看看uni-app的目录结构如何,下面是【购靓号】项目的目录结构

    下面目录说明好好看一下

    common 是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面
    components是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数
    pages 是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。
    static 是存放字体或图片的文件夹,一些静态资源都可以放这里面
    store 是vuex状态管理,因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
    subpages 是因为内容过多,分的包,这里面新建的页面pages.json里面不会自动生成对应配置项
    subpagesA 也是分的包,因为小程序限制,所以建议大家在一开始就考虑分包情况。免得后面又要整理
    unpackage 里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面
    App.vue 可以说是入口文件,我们公共的css可以放这里面,应用启动需要做的事情也可以放这里面,但是这个里面是不能进行页面跳转的
    main.js 是入口js文件,跟vue脚手架一样的,我们可以引入全局js,配置一些全局js函数等都可以在这里操作
    manifest.json是uni-app的配置项,一般都是可视化配置,很少用到源码配置,大家基本看一看就知道了,不知道的加QQ群私聊群主:682783851
    pages.json 就是页面配置文件了,你写的每一个页面都要在这里面配置,每个页面一些的特殊配置项也是在这里面写,uni-app pages配置项
    uni.scss 是uni-app的样式包,大家随意放

    这个时候我们就可以开始开发页面了,直接在pages文件夹上右键就可以新建页面了,每一个页面都是vue文件,结构跟我们使用vue脚手架一样,写起来还是很舒服呀!
    上面是一个大概的讲述,具体的学习路线还是要依赖官方文档,大家可以根据下面流程学习

    uni-app介绍
    uni-app组件
    uni-app配置
    uni-app接口
    一定要注意每个组件和接口在平台的支持情况。

    官方文档非常详细,我们无需依赖其他书籍,有问题可以加QQ群,里面有很多学习资料,也可以提资源需求,还可以私聊群主解决问题,群主就是我,哈哈哈。
    另外,想看看uni-app做出来的跨平台应用是什么体验的小伙伴,可以看下面了,体验一下中大型项目的感觉,包含登录支付功能,还可以分享

    下面是【购靓号】平台的跨平台应用,PC端可访问购靓号 或复制打开链接https://www.golianghao.com。手机端可扫码体验
    展开全文
  • uni-app入门

    千次阅读 多人点赞 2019-09-10 15:59:27
    一、uni-app简单介绍 什么是uni-app? uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行,运行体验更好 ...

    一、uni-app简单介绍

    什么是uni-app?

    uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

    uni-app的优点

    跨平台发行,运行体验更好

    • 与小程序的组件、API一致;
    • 兼容weex原生渲染,增加了开发效率高,但是由于weex坑比较多,建议还是使用局部渲染优化;

    通用前端技术栈,学习成本更低

    • 支持vue语法,微信小程序API
    • 内嵌mpvue

    开发生态,组件更丰富

    • 支持通过npm安装第三方包
    • 支持微信小程序自定义组件及JS SDK
    • 兼容mpvue组件及项目(内嵌mpvue开源框架)
    • App端支持和原生混合编码
    • 插件丰富,DCloud将发布插件到市场

    二、功能框架浏览图

    在这里插入图片描述

    三、创建项目

    1、安装HBuilderX

    HBuilderX内置相关环境,无需配置nodejs、vue等,三秒钟就可以创建一个项目。

    • 小提示:ctril+N可以快速调转到新建选择类型
      在这里插入图片描述

    2、创建uni-app
    在这里插入图片描述

    3、运行项目
    在这里插入图片描述
    4、官方提示

    • static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
    • css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。

    四、学习框架

    1、项目结构介绍

    在这里插入图片描述

    2、开发规范

    2.1 uni-app 约定的开发规范

    • 页面文件遵循 Vue 单文件组件规范
    • 组件标签靠近小程序规范
    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni
    • 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
    • 为兼容多端运行,建议使用flex布局进行开发

    2.2 uni-app 开发的注意事项

    • html标签
      uni-app的tag同小程序的tag,和HTML的tag不一样,比如div要改成view,span要改成text、a要改成navigator。

    • CSS
      推荐使用flex布局模型
      单位方面,uni-app 支持的通用 css 单位包括 px、rpx
      (早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了)

    • JS
      只有H5端可使用浏览器内置对象,比如document、window、localstorage、cookie等,以及jquery等依赖。

    • 项目文件
      显示页面必须放到pages目录下,页面所在目录的目录名需要放入相同名称的.vue文件。
      在这里插入图片描述

      静态资源如图片,固定放到static目录下。这是webpack、mpvue的规则

    • echats图表
      H5端流行的echart报表因为涉及大量dom操作,无法跨端使用,而wx-chart在跨端和更新方面都不足,推荐使用uChart组件。如仍然坚持使用原版echart,可在web-view组件中内嵌html来使用。

    3、页面样式与布局

    (1)尺寸单位

    uni-app支持以下css单位:

    单位 介绍
    px 屏幕像素
    upx uni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大
    vh 是视窗高度的百分比
    单位换算 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

    注意问题: 动态绑定的 style 不支持使用 upx,因为upx是编译器处理的,在手机端动态修改样式赋值时,无法直接使用 upx。

    解决方案: 使用 uni.upx2px(Number) 转换为 px 后再赋值。

    this.cWidth = uni.upx2px(750);
    

    (2)样式导入

    <style>
        @import "../../common/color.css";
        .colorA {
            box-shadow: none;
        }
    </style>
    

    (3)内联样式

    支持 style 和 class来控制样式,但建议不要在style中直接使用,影响渲染速度。

    (4)所支持的选择器
    在这里插入图片描述

    (5)背景图片 和 字体图标

    • 支持 base64 格式图片。
    • 支持网络路径图片。
    • 使用本地图片或字体图标需注意:
    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)。
    /* 背景图片 */
     .bgImg {
         background-image: url('~@/static/logo.png');
     }
    /* 字体图标 */
     @iconImg {
         font-family: test1-icon;
         src: url('~@/static/iconfont.ttf');
     }
    

    (6)条件编译

    1、用特殊的代码做标记,不同标记里面的代码可以在不同平台里面执行。

    2、支持的文件

    • .vue
    • .js
    • .css
    • pages.json
    • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

    3、语法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在
    • %PLATFORM%:平台名称
    	<!-- #ifndef APP-PLUS -->
    	<text class="app-text">text</text>
    	<!-- #endif -->
    	
    	<!-- #ifdef MP-WEIXIN -->
    	<text class="weixin-text">text</text>
    	<!-- #endif -->
    
    展开全文
  • 课程特色:该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用uniapp可以做更强大的小程序,该课程专为想要学习开发小程序...
  • uniapp入门学习

    2020-05-13 22:41:30
    文章目录uni-app介绍什么是ui-appui-app社区和规模uni-app基础ui-app初体验开发方式项目结构介绍项目目录样式和sass样式和sass基本语法事件组件生命周期ui-app项目项目简介(懂你找图微信小程序) ...

    uni-app介绍

    什么是ui-app

    ui-app是一个使用vue.js语法来开发所有前端应用的框架
    (网页应用、安卓应用、苹果应用、各种小程序应用(微信、qq、支付宝等))
    ##线上产品
    csdn ,开源中国,咪咕商城、中国银联、招商银行等等

    ui-app社区和规模

    380万开发者、几十万应用案例、8.5亿手机端用户、数千款ui-app插件、70+微信/qq群

    uni-app基础

    ui-app初体验

    开发方式

    1.使用DCloud的hbuilderX快速开发
    2.使用脚手架来快速搭建和开发

    1. 全局安装
      npm install -g @vue/cli

    2. 创建项目
      vue create -p dcloudio/uni-preset-vue my-project

    3. 启动项目
      npm run dev:mp-weixin

    4. 微信小程序开发者工具导入dist在这里插入图片描述在这里插入图片描述

    • 搭建过程可能出现vue和vue-template-complier版本不一致的问题。。。此时根据提示,重新安装对应的vue版本即可。npm install vue@2.6.10然后再重新运行项目 npm run dev:mp-weixin

    项目结构介绍

    项目目录

    在这里插入图片描述 public ->index.html 给uiapp 做网页应用, 提供模板的功能
    .gitignore ->git管理文件
    babel.config.js ->js版本管理 比如es5转es6
    package.json\package-lock.json ->node项目必备的包的描述文件
    postcss.config.js->定义如何编译css代码,添加什么前缀、版本啊
    README.md ->编写文字给用户看
    tsconfig.json ->如果项目用js开发,可能会对语法进行规范,在这里进行配置
    src中的目录结构:
    在这里插入图片描述
    pages:页面
    static:静态资源(不要放样式)
    App.vue:整个应用启动做的事情
    main.js:入口文件(增加函数、方法等可以在这里定义)
    pages.js:新增页面时,既要在pages增加文件,同时也需要在这里面配置文档路径、标题等。这里面有个globalStyle定义全局窗口样式(标题、文字、颜色等) (路劲谁放在前面谁就是首页)
    uni.scss:这里是uni-app内置的常用样式变量
    在这里插入图片描述

    样式和sass

    样式和sass

    uniapp中直接支持小程序的rpx和h5的vw、vh

    • rpx是小程序中的单位,750rpx=屏幕的宽度
    • vh、vw是h5中的单位,100vh=屏幕的高度,100vm=屏幕的宽度

    uniapp中内置有sass的配置了,怎么使用?

    1. 首先全局安装对应的依赖
    npm install sass-loader node-sass
    
    1. vue组件中,在style标签上加入属性<style lang='scss'>

    基本演示代码(pages/index2/index.html):

    <template>
    	<view class="content">
    		  <view class="rpx">rpx</view> 
              <view class="vw">vw</view>
              <view class="sass" >sass</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    
    		}
    	}
    </script>
    
    <style lang="scss">
    	/*rpx是小程序中的单位,750rpx=屏幕的宽度*/
    	.rpx{
            width: 750rpx;
            height: 100px;
            background-color: aqua;
        }
        .vw{
            /*vh、vw是h5中的单位,100vh=屏幕的高度,100vm=屏幕的宽度*/
            width: 50vw;
            height: 100px;
            background-color: tan;
    
        }
        .content{
            .sass{
                background-color: red;
                color:$uni-text-color-grey;//使用uni.scss里面定义好的颜色
            }
    
        }
    </style>
    
    

    在这里插入图片描述

    基本语法

    数据的展示

    1. js里data中定义数据
    2. template通过{{数据}}展示
    <view>{{msg}}</view>
    
    1. 在标签属性上通过:data-index=‘数据’使用
     <view :data-color="color">color</view>
    

    数据的循环

    1. 通过特定的语法v-for将数据显示
    2. item和index分别为循环项和循环索引
    3. :key指定唯一的属性,用来提高循环效率
      <view v-for="(item,index) in arr" :key="item.id">{{item.id}}--{{item.text}}--{{index}}</view>
    
    data(){
    	return{
    		arr:[
    		     {id:0,text:"苹果"},
    			{id:1,text:"香蕉"},
    			{id:2,text:"李子"}
    			
    		]
    	}
    }
    

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051300474736.png

    条件编译

    动态显示DOM元素

    1. v-if
    2. v-show
    <view v-show="false">v-show</view>
    <view v-if="false">v-if</view>
    <view v-show="isShow">显示或隐藏</view>
    

    区别

    (1)手段:

    v-if是动态的向DOM树内添加或者删除DOM元素;

    v-show是通过设置DOM元素的display样式属性控制显隐;

    (2)编译过程:

    v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;

    v-show只是简单的基于css切换;

    (3)编译条件:

    v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

    v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

    (4)性能消耗:

    v-if有更高的切换消耗;

    v-show有更高的初始渲染消耗;

    (5)使用场景:

    v-if适合运营条件不大可能改变;

    v-show适合频繁切换。

    计算属性

    1. 可以理解是对data数据的加工或者过滤能力
    2. 通过computed来定义计算属性
    data(){
       money:1000
    },
    computed:{
    		//把cnMoney看成是data中的普通数据一样使用
    		cnMoney(){
    			return "$"+this.money;
    		}
    	}
    
     <view>{{cnMoney}}</view>
    

    在这里插入图片描述

    事件

    在这里插入图片描述在这里插入图片描述

    事件的使用:
    1.注册事件@click="handleClick"
    2.methods中定义事件监听函数

    在这里插入图片描述
    3.事件的传参

     <view  data-index="11"  @tap="handleClick(1,$event)">click me</view>
    <view data-index="11" @tap="handleClick(2,$event)">click me</view><!--data-index自定义属性传参通过event.currentTarget.dataset.index获取-->
    
    methods: {
    			handleClick(index,event){
    				console.log(index);
    				console.log(event);
    				console.log(event.currentTarget.dataset.index);				
    			}
    },
    

    组件

    组件的简单使用

    1. 组件的定义
      src目录下新建文件夹componenets
      components下新建组件*.vue
      在这里插入图片描述
    <template>
      <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg"  />
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    .img-border{
      border-radius: 50%;
    }
    </style>
    
    1. 组件的引入
      页面引入:import 组件名 form '组件路径'

    2. 组件的注册
      页面实例中,新增属性compontents
      属性components是一个对象,把组件放进去注册

    3. 组件的使用
      在页面标签中,直接使用引入的组件<组件><组件>

    <template>
    	<view class="content">
    
    	<img-border></img-border>
    	</view>
    </template>
    
    <script>
    //引入自定义组件
    import imgBorder from "@/components/img-border"//@代表找到src路径
    	export default {
    		//注册组件
    			//Component Object
    		components:{
    			imgBorder
    		},
    	
    	};
    </script>
    
    <style lang="scss">
    	
    </style>
    
    

    在这里插入图片描述

    组件传参

    父组件向子组件传递参数,通过属性的方式

    父组件

    <template>
    	<view class="content">
    <!--组件使用-->
    	<img-border :src="src1"></img-border><!--传参src给子组件img-border-->
    	<img-border :src="src2"></img-border>
    	</view>
    </template>
    
    <script>
    //2引入自定义组件
    import imgBorder from "@/components/img-border"//@代表找到src路径
    	export default {
    		data(){
    			return{
    				src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",
    				src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
    			}
    		},
    		//3注册组件
    			//Component Object
    		components:{
    			imgBorder
    		}
    		
    	
    	}
    </script>
    
    <style lang="scss">
    	/*rpx是小程序中的单位,750rpx=屏幕的宽度*/
         /*vh、vw是h5中的单位,100vh=屏幕的高度,100vm=屏幕的宽度*/
    </style>
    
    

    子组件

    <template>
    <!--要把props中传入的指=值看成是data中的变量一样来使用-->
      <image class="img-border" :src="src"  />
    </template>
    
    <script>
    export default {
      //声明要接受的 父组件传递过来的属性
      props:{
        src:String//这个src跟父组件中那个属性名保持一致
    
      }
    
    }
    </script>
    
    <style>
    .img-border{
      border-radius: 50%;
    }
    
    </style>
    

    在这里插入图片描述

    子组件向父组件传递参数,通过触发事件的方式

    子组件通过触发事件的方式向父组件传值,父组件通过监听事件的方式来接收数据

    例子:点击图片的时候把图片路径打印到页面

    子组件

    <template>
    <!--要把props中传入的指=值看成是data中的变量一样来使用-->
      <image class="img-border" :src="src"  @click="handleClick"/>
    </template>
    
    <script>
    export default {
      //声明要接受的 父组件传递过来的属性
      props:{
        src:String//这个src跟父组件中那个属性名保持一致
    
      },
      methods:{
        handleClick(){
          /*子组件向父组件传递数据 通过触发事件this.$emit("自定义的事件名称","要传递的参数");*/
          this.$emit("srcChange",this.src);
    
        }
      }
    
    }
    </script>
    
    <style>
    .img-border{
      border-radius:50%;
    }
    </style>
    

    父组件

    <template>
    	<view class="content">
    	<!--组件使用-->
    	<view class="hh">
    		子组件传递过来的路径:{{src}}
    	</view>
    	<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
    	<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
    	</view>
    </template>
    
    <script>
    //2引入自定义组件
    import imgBorder from "@/components/img-border"//@代表找到src路径
    	export default {
    		data(){
    			return{
    				src:"",
    				src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",
    				src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
    			}
    		},
    		//3注册组件
    			//Component Object
    		components:{
    			imgBorder
    		},
    		methods:{
    			handleSrcChange(e){
    				console.log(e)
    				this.src=e;
    			}
    		}
    		
    	
    	}
    </script>
    
    <style lang="scss">
    	/*rpx是小程序中的单位,750rpx=屏幕的宽度*/
         /*vh、vw是h5中的单位,100vh=屏幕的高度,100vm=屏幕的宽度*/
    	 .hh{
    		 font-size: 10px;
    		 height: 5vh;
    
    	 }
    </style>
    
    
    使用全局数据传递参数

    组件之间还有很多不是父子组件的关系,这些组件之间共享数据就没法使用上面知识点,全局共享数据的方法如下:
    通过挂载vue的原型 上
    只要有Vue的地方,可以通过vue.prototype增加一些变量和函数
    ,就可以通过this.来获取这些变量或者方法。(一般写在main.js)

    vue.prototype.baseURL="http://baidu.com"
    

    通过globalData的方式

    global Data:{
       base:"www.360.com"
    }
    

    App.vue中声明globalData,在任意组件可以通过getApp().globalData.base拿到数据(getApp()方法返回一个应用实例)

    –vuex
    –本地存储

    组件插槽

    • 标签其实也是数据的一种,想实现动态的给子组件传递标签,就用插槽slot
    • 通过slot实现占位符
      插槽使用:

    父组件:

    <template>
    	<view class="content">
          <my-form>
              <view><!--这级以下标签就代替了了组件my-form的slot--->
                  <input type="text"><!--小程序中输入框没有默认颜色-->
                  <radio></radio>
                  <checkbox></checkbox>
              </view>
            
          </my-form>
        </view>
    </template>
    
    <script>
    import myForm from "@/components/my-form"
    	export default {
            components:{
                myForm
            },
    	}
    </script>
    
    <style lang="scss">
    	/*rpx是小程序中的单位,750rpx=屏幕的宽度*/
    	
      /*vh、vw是h5中的单位,100vh=屏幕的高度,100vm=屏幕的宽度*/
      
       
    </style>
    
    

    子组件:

    <template>
      <view class="form">
           <view class="form-title">标题</view>
    		<view class="form-content">
                <slot></slot>    
            </view> 
    	</view>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>
    

    在这里插入图片描述

    生命周期

    介绍:

    • uniapp框架的生命周期结合了vue和微信小程序的生命周期
    • 全局的APP中使用onLaunch表示应用启动时
    //整个应用启动
    		onLaunch: function() {//常用
    			console.log('App Launch 应用启动')
    		},
    		//应用被看到
    		onShow: function() {
    			console.log('App Show')
    		},
    		//应用被隐藏
    		onHide: function() {
    			console.log('App Hide')
    		}
    
    • 页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时
    	//页面加载完毕
    		onLoad() {
    			console.log("页面加载完毕")
    
            },
            //页面被看到
            onShow(){
                console.log("页面被看到");
                
            },
    
    • 组件中使用mounted组件挂载完毕时
     mounted(){
            console.log("my-form组件挂载完毕")
        }
    
    
    展开全文
  • uniapp # 基本介绍

    2020-07-12 18:19:38
    自称是“跨端终极解决方案” 对有微信小程序和vue开发经验的同学来说比较友好(就是我hhh) upx是类似rpx的单位 主要解决的问题 优点 ...接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见...
  • 首先在学习uni-app之前,确保我们的电脑上已经安装HBuilderX,与微信开发者工具 为了大家快速了解学习这个框架我们这里就不放过多的演示图片了,大家按照提供的方法或API进行操作即可 这里要说一下uni-app这个框架...
  • uniapp基础知识

    2020-09-06 17:15:31
    ####uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 ...uni-app 是一个使用 Vue.js ...
  • uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

    万次阅读 多人点赞 2019-11-11 17:02:46
    优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小...编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPo...
  • 很多开发者在没有入坑uniapp之前,都想知道uniapp的体验到底怎么样,坑多不多?今天就以我个人开发的项目来谈一谈。 首先介绍一下我在公司开发的项目:购靓号APP、也有h5、购靓号小程序 关注公众号可以快速体验所有...
  • 什么是uni-app?

    千次阅读 2019-09-10 23:10:47
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 即使不跨端,uni-app同时也是更好的小程序开发...
  • uniapp禁止页面滚动条出现

    万次阅读 2019-11-17 22:27:46
    最近在学习使用uniapp开发混合应用,在学习的过程中还是发现有很多坑的。很多东西都不是很全,需要自己一个一个去踩坑以及自己搜索答案。所以我决定从今天开始记录一下我在使用uniapp开发的过程遇到的问题以及解决...
  • uniapp动态修改标题

    2019-10-09 11:40:47
    uniapp作为一款开源软件,可以做到一端多用,不过也有局限,在开发中有时候需要动态的去修改标题,例如 多页面逻辑合成一个页面的时候 uniapp打包分为H5 小程序 和 APP(一般主要的是这三个) 下面贴上的代码,做...
  • 标题:付哥的技术课堂-uniapp从零快速开发到实践上线应用-15整体回顾并问题修改1 标题:付哥的技术课堂-uniapp从零快速开发到实践上线应用-15整体回顾并问题修改2 标题:付哥的技术课堂-uniapp从零快速开发到...
  • uniapp 解决swiper Tab选项卡切换高度自适应问题

    万次阅读 热门讨论 2019-09-20 18:06:23
    uniapp 解决swiper滚动高度自适应问题 问题描述:使用的是uniapp 官网案例中的一个swiper插件(插件名:uni-swiper-dot),当需要tab滚动,但是它又只能在最外层的swiper处设置一个固定的高度,纠结很久以后,终于想...
  • 官方demo里有图片裁剪的功能,所以这里直接拿来用了,uniApp——GitHub,效果可以扫下链接里的小程序码(模板-图片裁剪)看下,这块代码位置在pages/template/crop/crop.vue。 //这里要实现的功能是裁剪图片修改用户...
  • uniapp推送服务端java

    2020-03-17 08:54:17
    记录下自己走的坑,因为app端使用uniappuniapp端要求使用uniapp的推送,说了叭叭一大堆,并给我了一页文档,还无法使用,然后百度一通搜,发现都是个推,此时只听前端说是个推封装,巴拉巴拉,搞了一上午也没找到...
  • uniapp销毁addEventListener事件

    千次阅读 2019-09-23 16:22:14
    uniapp销毁addEventListener事件 ** 百度了很多vue的方法,结果都不适用,只好自己想办法,也是无关紧要的东西,不影响运行,但是看着心里都烦,有更好的解决方案欢迎指点 上报错信息 这是一个监听滚动的方法,离开...
  • uniapp地图-标记点-多点连线

    千次阅读 热门讨论 2020-01-05 10:29:40
    前言:正在使用uniapp开发地图这块不明白的小伙伴可以看看我以下的代码分享;下面是我开发中使用vue+uniapp遇到的地图问题,有的APP涉及到地理位置的功能,所以,地图组件可以实现这个功能,如:调起手机的第三方导航...
1 2 3 4 5 ... 20
收藏数 26,847
精华内容 10,738
关键字:

uniapp