uni-app使用教程

uni-app：这是一个包含了很多组件，插件的基于vue 的跨平台，小程序框架

新建页面之后，需要在pages.json，进行配置，第一个就是首页，入口页
pages.json
- 全局style 和专属style
常用渲染方式
- 列表循环输出 v-for="(item, index) in students"
- 条件渲染： v-if="test" 判断是否进行渲染
- 隐藏元素：： hidden =“test” 渲染但是不展示用于可能点击某个按钮会出现的情况避免卡顿
class 支持的语法
- 字体的条件显示 :class="[isRed ? 'red':'blue']" .red为css样式冒号的形式进行绑定
- 动态的class style 要使用冒号进行绑定静态的则不需要
- style 的动态绑定形式 :style="{fontSize:fontSize+'px'}" 是中括号
- 注意动态修改参数的时候要加_self.参数进行修改
- color: #DD524D !important; 表示追加的样式
- 为点击事件绑定处理方法和 id 动态的要加冒号静态的直接 id="{{'menu_'+index}}"
  - @click="menuClick" ="'menu_'+ index"
  - 使用时使用currentTarget.id 更为准确防止事件穿透
- 当手指离开触屏时的事件为 touchcancle， touchmove , touchend
- 滚动事件 scroll
- 使用@绑定事件
- this 与_self的使用场景不同后者用于回调函数内部（此时如果用this 代表的只是其外面的函数，不能代表全局，所以不能对变量进行修改）
页面之间进行参数传递
- uni.navigateTo({

url:"../test/test?name=test&age=18"

})

get 与post之间的区别
- get 发起请求数据包参数放在url
- post 上传参数利用data进行上传
选择照片从本地或者进行拍照

监听方法

onLoad
onPullDownRefresh 更新之后要调用stopPullDownRefresh来结束刷新
- 同时下拉的时候也可以显示 loding标志
上啦加载更多
- onReachBottom生命周期监听
unionID 与openID 的区别以及如何申请见P22
申明全局变量在App.vue 中在script 中添加 global.testData="s"
用户登录界面
打包上线没看
公共模块 common.js ，使用时在其他文件要进行 import name from "../../name"
- 另外一种引用就是通过 protoType进行原型定义在main.js 文件中进行定义。Vue.protoType.appName=“wlq” App.myType="APP"
- 使用时直接通过this.appName 进行引用而不需要import
class 与type 绑定这块直接看文档https://uniapp.dcloud.io/use?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a
- 总结来说就是 :class=“ 里面”
  - 对于动态属性要进行判断选择的使用{A:B} 注意 B是选这的关键位true则执行A这个类名的样式
  - 不需要进行判断单纯是多个属性的罗列使用 [] 框起来就行了
  - 三元运算要在 [] 中进行
  - [] 里面可以嵌套 {} 实现动态和静态同时绑定
  - 里面内容是变量则不用对其加“”，如果是样式类则要用“”表示其是类名称
  - 动态属性要进行动态绑定：：class="{active: isactive}" 里面是支持三元运算的实现动态样式
  - v-bind:class=“{}”：绑定多个属性
- style 行内实现样式修饰
使用列表渲染v-for=“（item, index）in list” :key=index 这样才不会报错
生命周期函数 onReady() 表示的是页面渲染完成时调用的生命周期函数
节点信息
- 主要用于页面的节点信息的采集获取组件的宽和高