uni-app的笔记

解释

官网 https://uniapp.dcloud.net.cn/
由dcloud 公司开发的 多端融合框架
次开发 多端运行
竞品：apiCloud ，appCan ，Codova
技术架构
Vue语法+小程序的api
端Hybrid混合开发

1. App端
   HTML+
   nvue（原生view）
   native.js(js原生沟通的桥梁)
   weex
   内置ios/安卓的模块使用
   2. H5端
   h5专用api
   各种小程序（微信为主）

多端运行

vue语法

模板语法

1. 文本渲染

   1. {{表达式}}

   2. v-text=“表达式”

   3. 表达式
      简单的js运算{{2+3}}
      js方法调用{{title.length}}
      {{title.split(“”).reverse().join(“”)}}
      3元运算符

      <view>{{title.length>15?'长度很长':'字少事大'}}</view>
      

   4. v-html 富文本

2. 条件渲染
   v-if
   v-else-if
   v-else
   v-show
   通过三元运算符

3. 列表选项
   字符串，数字，列表，对象都可以遍历

   <view v-for="(item,index) in list" :key="index">{{index+1}}  {{item}}</view>
   

   一定要保证兄弟元素间的key值是唯一

4. 属性绑定

    <button v-bind:disabled=“true”>
    <button :disabled="true">
   

5. 表单绑定
   默认:value=“单向绑定”
   input v-model=“双向绑定”

   @change=“$event.detail.value”事件，事件的值$event.detail.value
   

6. 事件

   1. 事件绑定：

      <view v-on:click="响应"
      

   2. 简写绑定：

      <view @click="事件响应"
      

   3. 事件行内处理

      <view @click="num++"
      

   4. 事件响应函数(函数在methods定义)

      <view @click="say"></view>
      <view @click="say"></view>
      

   5. 事件传参
      不写参数@click=“say”
      等同于 @click=“say()”
      等同于@click=“say($event)”
      $event 是一个固定写法 代表事件对象

      @click=“doit(str)”
      doit(str="你好"){
      uni.showModal({title:str})
      }
      

   6. 事件对象

      $event/e
      function say(e){
      }
      

      target目标对象
      dataSet 组件传参

      <view :data-title="title" @click="say">
      function say(e){
      e.target.dataset.title
      }
      

7. uni-app页面
   页面配置pages.json
   globalStyle全局样式
   - 默认页面的样式会应用全局样式页面写了style 配置，那么用的配置覆盖全局的配置
   pages页面
   - path页面路径
   - style 页面样式

8. vue选项
   data数据
   methods方法
   computed计算
   watch监听
   directive指令
   filter过滤

9. uni-app的生命周期

   1. Vue的生命周期

      1. 创建
      • beforeCreate
      • created
        可以使用this，没有dom
        作用：
        1. 初始数据
        2. 注册监听事件
        3. 开启定时器
        4. ajax请求
      2. 挂载
      • beforeMount
      • mounted
        可以操作dom（节点）
        作用：
        1. 操作dom
        2. ajax请求
      3. 更新
         beforeUpdate
         updated
      4. 卸载
         beforeDestroy
         • 作用：
           1. 移除事件监听
           2. 移除停止定时器
         • destroyed

   2. 小程序的生命周期

      • onLoad加载
        能够获取页面的参数
        开启ajax，定时器，事件监听
        像vue的created
      • onShow显示
        播放媒体
      • onReady准备
        获取节点信息
        像vue的mounted
      • onHide 后台运行
        停止播放媒体
      • onUnload 卸载
        停止事件监听与定时器

   3. 小程序的全局方法
      onPullDownRefresh
      下拉刷新
      onReachBottom()
      触底更新
      onShareAppMessage
      右上角分享
      onPageScroll
      页面滚动
      onShareTimeline
      分享到朋友圈

   4. app的全局方法
      onBackPress
      手机的返回键被点击
      onNavigationBarButtonTap
      导航栏按钮被点击

10. 组件表单
    1. button按钮
    type
    . primary主要
    . warn警告
    . default 默认
    size=“mini”
    disabled 是否可用
    2. input
    . value值
    . v-model对表单双向绑定
    . @change=“$event.detail.value”
    . placeholder 提示文本
    3. picker
    . mode模式
    . time时间
    . date 日期
    . region地区
    日期
    . start=“09:01”
    . end=“21:01”
    value值

    @change=“$event.detail.value”

    4. slider滑块
       value 值
       max 最大
       min 最小
       @change=“$event.detail.value”

路由

1. 路由组件
   navigator导航
   1. url 跳转页面的地址
   2. open-type
   打开类型
   - navigate跳转
   - redirect重定向（当前页面不留历史记录）
   - navigateBack返回
   - relauch 重启
   - switchTab 跳转底部栏

2. 路由传参
   传递

   url:path?name=mumu&age=18
   

   接收

   onLoad(option){}
   option的值{name:"mumu",age:18}
   

3. 路由api
   uni.navigateTo({url})跳转
   uni.redirectTo({url})重定向
   uni.navigateBack()返回
   uni.switchTab()底部栏切换
   uni.reLaunch()重启

4. 路由配置
   tabBar
   color
   selectedcolor
   list
   pagePath
   iconPath
   selectedIconPath
   text

5. 获取当前页面getApp

   1. 在App.vue定义globalData:{num:100}
   2. 要使用的页面获取app
      var app = getApp()
   3. 获取globalData的值
      onShow(){
      this.num = app.globalData.num
      }
   4. 更新globalData值
      addNum(){
      app.globalData.num++;
      this.num = app.globalData.num
      }

6. 获取页面栈getCurrentPages
   var page = getCurrentPages();
   获取当前的页面栈，是一个数组（1-5）

   uni.navigateBack({delta:page.length})
   

   page[page.length-1] 获取当前页面的信息
   （不要去修改）

条件编译

1. 目的:不同的平台展示不同特性与功能

2. 模板条件编译
   格式

   <!-- #ifdef H5 -->
   内容
   <!-- #endif -->
   

   条件

   1. APP App端
   2. H5网页
   3. MP小程序
      MP-WEIXIN微信小程序

3. css条件编译

    /* #ifdef APP */
    .active{color:red}
    /* #endif */
   

4. js条件编译

   // #ifdef APP-PLUS
   uni.showModal({
   title:"你好App用户"
   })
   // #endif
   

5. 条件配置pages.json

   “style”:{
    "h5":{
     "titleNView":{
     "titleText":"我是H5"
    }
   },
    "app-plus": {
   "titleNView":false //隐藏导航栏
   }
   // #ifdef MP-WEIXIN	|| APP	
   {
   "path":"pages/condition/we",
   "style":{
   "navigationBarTitleText": "小程序专有页面"
   }
   },
   // #endif
   

###vuex
初始化’

  	  store/index.js
        import Vuex from 'vuex'
        import Vue from'vue'
        Vue.use(Vuex)
        export default new Vuex.store({state,
        mutations,actions,getters,modules})

    main.js
        import store from './store/index.js   'Vue.prototype.$store = store;

vuex的模块
state存放数据
mutations更新数据（唯一方式)
actions动作（异步api操作)
getters计算，从现有的state计算出新的数据
modules模块

state定义数据

    state: {gTitle:{
    text:"你好vuex",color:"#000",fontSize:"24px",background:"#f70"}}

在页面中使用$store.state.gTitle.text
修改只能通过mutations
组件中简写

        import {mapState} from 'vuex'
        computed:{ ...mapState(["gTitle"])} 
        <view :style="gTitle">

mutations改变数据

    setFontSize (state,data){state.gTitle.fontSize=data+"px"}

在页面中使用this.$store.commit(“setFontSize”,80)
简写

        import {mapMutations} from 'vuex'methods:{
        ｜ ....mapMutations(["setFontSize"])}
        this.setFontSize(100)

actions异步操作

    定义actions:{
        get]ok(context,data){uni.request({
        url:"http://520mg.com/millist.php",
        success:res=>{
        context.commit("set]oks",res.data.result);}
        })}

在页面中使用

     this.$store.dispatch("getJok",{page:1})

简写

        导入
         import {mapActions} from 'vuex'计算
         methods:{
         ...mapActions["get]ok"]}

使用

         this.getJok

getters计算

    getters:{"totalLen":function(state){ return xxx}}

在页面中使用

     this.$store.getter.totalLen

简写

        import {mapGetters} from 'vuex'computed:{
        ｜ ...mapGetter(["totalLen"])}
        this.totalLen

分享

微信小程序分享

	onShareAppMessage(){}

分享给好友

		onShareTimeline(){}

分享到朋友圈
app分享

	uni.share({
provider: "weixin", //提供商
scene: "WXSceneSession", //微信聊天
type: 0,
href: "http://dida100.com",
})
分享准备
	manifest.json

模块配置
Share

在微信开发平台注册获取appid
https://open.weixin.qq.com/

支付

app的支付
准备工作
支付厂商
获取id
微信：微信支付平台
https://pay.weixin.qq.com/

支付宝
打包时候
manifest.json
app模块配置
payment支付

代码
01 获取支付厂商

	uni.getProvider()
		uni.getProvider({service: "payment"})

02 用户发起支付

	requestPayment(item,index){}

03 获取订单信息

getOrderInfo(item.id)

04 发起支付api

uni.requestPayment({
provider:item.id, //提供商
orderInfo: orderInfo, //订单信息
})

小程序的支付

01 用户的点击 发起支付

async weixinPay() 

02 获取openid

本地存储 ||loginMpWeixin

获取code

uni.login({})

获取openid

	uni.request({})

03 获取订单信息

 this.getOrderInfo('wxpay')

04 根据订单信息发起支付

uni.requestPayment({
				...orderInfo})

打包html代码上传服务器

配置相对地址
manifest.json
web配置
运行的基础路径 ./
发行->发到网站-PC
unpackage>dist>build>H5
上传服务器
flashFXP工具上传

打包微信小程序上传

1. 配置id
   manifest.json 微信小程序配置
2. 单击发行
   发行->小程序微信
3. 进入小程序上传
   小程序右上角上传（先测试，真机测试）
4. 微信提交审核
   mp.weixin.qq.com
   版本管理
   审核
   审核通过发布
   认真填写隐私协议
5. 如果网络请求
   配置域名
   必须是https开头
   开发管理
   服务器设置
   服务器域名
   1. request合法域名
   uni.request,wx.request 请求的域名必须事先定义好
   2. uploadFile合法域名
   如果有上传也要配置上传的域名
   3. downloadFile合法域名
   配置下载域名
6. 搞钱
   01 累计用户操作1000 可以称为流量主
   开通广告(视频激励广告最挣钱)
   let rewardedVideoAd = null
   //定义

App打包上传应用商店

1. 应用商店
   - 华为
   opple
   vivo
   小米
2. 现在只有华为可以个人上传
   其他都必须是公司
3. 个人上传
   app的版权证明（600-1500）
4. 最难：应付国家的隐私条例
   应用商店的隐私审核