Uni-App 技术文档

Uni-App 技术文档 1
一、 Uni-app 2
二、 数据绑定 4
1、 {{}} 绑定数据 4
2、 三元运算符 4
3、 V-if 结合使用 5
4. v-for 嵌套循环 5
5. v-for key 6
三、 事件绑定 6
1、 事件 6
2、 v-if 结合使用 7
四、 Flex 布局 7
1、 rown 和 colmun 8
2、 主轴上的对其方式 8
3、 交叉轴 8
4、 Order 排序 9
5、 导入外部CSS 9
6、 引入UNI-APP官方CSS样式库 10
6.1 创建 uni-app Hello 项目,从模板中复制common 目录下的uni.css 到新建项目的common 目录 下。 10
6.2 在App.vue 项目中引入css 文件 11
6.3 12
7、 使用iconfront 字体 12
1、 找到字体: 12
2、 解压复制iconfont.ttf到static/front 目录 下 13
8、 引入iconfront CSS 14
9、 引用animation 动画效果 17
1、 下载CSS :https://daneden.github.io/animate.css/ 17
2、 引用CSS 17
3、 使用animate.css 样式库 19
4、 19 10、 固定栏目 19
五、 远程请求 19
1、 uni.request 19
2、 页面加载中设置 20
六、 变量全局化 22
1、 组件引用方式: 22
七、 组件 25
1、 自定义组件 25
2、 组件使用 25
引入组件: 25
注册组件: 26
使用组件: 27
3、 向组件传值: 29
3.1向自定义组件传入值: 29
在使用自定义组件页面定义myvalue 值: 29
在自定义组件中接收传入参数: 29
组件接收传入值 30
传入值(引用组件页面) 31
4、 组件传方法事件: 31
4.1 组件代码 31
4.2 主页代码(调用组件) 32
5、 全局监听组件事件: 33
5.1 主页监听组件事件 33
5.2 组件触发事件 34
八、 页面跳转 35
1、 绑定id 35
2、 获取ID 36
3、 传递参数 36
4、 页面跳转获取传值(新页面获取传来的值)
九、 常用操作: 37
1、 下拉刷新 37
十、 使用Vuex 39
1、 直接在main.js中引入vuex 39
2、 间接引入:创建store 目录,在目录下的index.js 中引入vuex ,然后在main.js 中引入。 40
3、 使用示例 42
4、 Getters 44
十一、 设置自定义代码块 46
十二、 设置开发运行指定页面 47
1、 设置开发指定运行页面 47
2、 运行 47
3、 微信开发者工具里里编译匹配 48
4、 菜单双联动效果 49