原生小程序知识点总结

前言

vue对应小程序框架 mpvue
注意：填写 url 以“/”开头（大坑）

插件（vscode）

小程序助手
easy less
mpvue
CSS Tree 使用方法：按ctrl+shift +p 点击 generate tree 生成css树张贴到.less文件中
minapp .wxml 通过 ctrl+/可快速注释

小程序快捷键（vscode）

wx-app 快速生成app/.js文件模板
wx-p 快速生成page/.js文件模板
安装minapp
便签名+.+class类名可快捷生成这样子的模板多个类名多个点隔开
wx-调用名称快捷生成wx Api
p10rp-0: 快捷生成padding: 10rp 0;
view{$}*100 快捷生成100个view
ctrl+/: 注释
shift+alt+a:注释
shift+alt+f:代码格式化
ctrl+shift+L 可实现多选
alt+shift+a: /* */ (js文件中) 正常注释 ctrl+/
ctrl+p:查找文件
ctrl+shift+p:查找命令

全局配置

app.json

page

包含普通页面和tab页面

window

tabbar（即tab页面）

page.json

各页面可修改全局配置app.json控制的导航栏外观，比如切换到当前页面，导航栏就显示当前页面的标题
原生小程序知识点总结

数据绑定

原生小程序知识点总结
注意：使用boo1类型充当属性checked
字符串和花括号之间一定不要存在空格否则会导致识别失败

运算

运算=>表达式

可以在花括号中加入表达式–“语句”
表达式
指的是一些简单运算数字运算字符串拼接逻辑运算。。
1数字的加减。。
2字符串拼接
3I三元表达式
语句
1复杂的代码段
1if else2 switch
3 do while。。。。
4for。.。

数组和对象循环

wx:for/wx:for-item/wx:for-index

wx:for="{{数组或者对象}}” wx:for-item="循环项的名称” wx:for-index=“循环项的索引“
wx:key="唯一的值”用来提高列表渲染的性能

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

条件渲染

wx:if

1wx:if="{{true/false}}"
1 if，else，if else wx:if wx:elifwx:else

hidden

2 hidden
1在标签上直接加入属性hidden
2 hidden="{{true}}"
3什么场景下用哪个
1当标签不是频繁的切换显示优先使用wx:ifI直接把标签从页面结构给移除掉

2当标签频繁的切换显示的时候优先使用hidden

事件绑定

原生小程序知识点总结

样式（wxss）

样式尺寸 rpx

原生小程序知识点总结

组件(component)

1页面.js文件中存放事件回调函数的时候存放在data同层级下！！！
2组件.js文件中存放事件回调函数的时候必须要存在在methods中！！！

组件中的事件调用

通过 console.log(e) 打印出传递到组件的回调方法中获取到的值(对象)

为了获取索引 -> 假设这个值（对象）的变量名为e 则定位到e.currentTarget.dataset.index
原生小程序知识点总结
用es6的语法获取值 const {index}=e.currentTarget.dataset 等价于 const index=e.currentTarget.dataset.index;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I5N2rYrq-1586870288868)(image\1585836352357.png)]