uni-app的笔记

解释

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

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

多端运行

vue语法

模板语法

文本渲染
1. {{表达式}}
2. v-text=“表达式”
3. 表达式
  简单的js运算{{2+3}}
  js方法调用{{title.length}}
  {{title.split(“”).reverse().join(“”)}}
  3元运算符
```
<view>{{title.length>15?'长度很长':'字少事大'}}</view>
```
4. v-html 富文本
条件渲染
v-if
v-else-if
v-else
v-show
通过三元运算符
列表选项
字符串，数字，列表，对象都可以遍历
```
<view v-for="(item,index) in list" :key="index">{{index+1}}  {{item}}</view>
```
一定要保证兄弟元素间的key值是唯一

属性绑定

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

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

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

事件

事件绑定：
```
<view v-on:click="响应"
```
简写绑定：
```
<view @click="事件响应"
```
事件行内处理
```
<view @click="num++"
```

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

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

事件传参
不写参数@click=“say”
等同于 @click=“say()”
等同于@click=“say($event)”
$event 是一个固定写法代表事件对象
```
@click=“doit(str)”
doit(str="你好"){
uni.showModal({title:str})
}
```

事件对象

$event/e
function say(e){
}

target目标对象
dataSet 组件传参

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

uni-app页面
页面配置pages.json
globalStyle全局样式
- 默认页面的样式会应用全局样式页面写了style 配置，那么用的配置覆盖全局的配置
pages页面
- path页面路径
- style 页面样式
vue选项
data数据
methods方法
computed计算
watch监听
directive指令
filter过滤
uni-app的生命周期
1. Vue的生命周期
  1. 创建
  - beforeCreate
  - created
    可以使用this，没有dom
    作用：
    1. 初始数据
    2. 注册监听事件
    3. 开启定时器
    4. ajax请求
  1. 挂载
  - beforeMount
  - mounted
    可以操作dom（节点）
    作用：
    1. 操作dom
    2. ajax请求
  1. 更新
    beforeUpdate
    updated
  2. 卸载
    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
  导航栏按钮被点击
组件表单
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”
1. slider滑块
  value 值
  max 最大
  min 最小
  @change=“$event.detail.value”

路由

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

路由传参
传递

url:path?name=mumu&age=18

接收

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

路由api
uni.navigateTo({url})跳转
uni.redirectTo({url})重定向
uni.navigateBack()返回
uni.switchTab()底部栏切换
uni.reLaunch()重启
路由配置
tabBar
color
selectedcolor
list
pagePath
iconPath
selectedIconPath
text
获取当前页面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
  }
获取页面栈getCurrentPages
var page = getCurrentPages();
获取当前的页面栈，是一个数组（1-5）
```
uni.navigateBack({delta:page.length})
```
page[page.length-1] 获取当前页面的信息
（不要去修改）

条件编译

目的:不同的平台展示不同特性与功能
模板条件编译
格式
```

内容

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

css条件编译

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

js条件编译

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

条件配置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.jsimport Vuex from 'vuex'import Vue from'vue'Vue.use(Vuex)export default new Vuex.store({state,mutations,actions,getters,modules})main.jsimport 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工具上传

打包微信小程序上传

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

App打包上传应用商店

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