1.循环
在小程序中也有循环遍历数据的方法 wx:for="{{遍历的数据}}"--这里有需要有一个唯一的key:wx:key="{{唯一值}}" 在循环中默认有item和index,item表示每一个单元,index是数据的下标,如果想改变item和index属性名可以通过,wx:for-item/index='xxx'来修改
2. 条件渲染
wx:if="{{变量}}"来进行选择性渲染
生命周期
小程序也有生命周期,只不过语法与Vue不相同
-
onLaunch表示页面打开时执行的函数,只会在页面打开时执行,只执行一次
-
onShow表示当前页是否在显示前台
-
onReady在页面渲染完成时执行的函数,只执行一次
-
onHide监听小程序是否切换为后台
这些生命周期通常用来获取场景ID 常见的场景ID:
- 1001表示发现小程序的主入口
- 1011通过扫描二维码
- 1007通过分享进入
小程序的常见API
- wx.request用来发送请求获取数据---语法:
这里因为时get请求,method就可以省略,data为传参
在小程序中的API大部分都是有success和fail两个回调函数
success表示成功的回调----fail表示失败的回调
在这里发送请求可能会发生错误,具体请看结尾个人踩的坑
- wx.getUserProfile用来获取用户信息---语法如下
des暂时还未有使用场景---待补充
需要注意的是,这个方法一般是写在点击事件上,当用户点击后会显示一个弹框
当用户点击了确定会执行success回调函数 点击取消会执行fail回调函数
- wx.chooseAddress获取用户收货地址---语法如下
可以在onLoad这个生命周期写,在页面打开时获取用户的收货地址
如果想了解更多的API
分包
分包就是将一些页面和相关的逻辑单独加载---实现 在app.文件通过subPackages配置并开启分包功能
这里的root可以认为是文件夹,如果列表内没有改文件夹,那么会创建一个
pages表示文件夹内的文件,在创建文件夹时会一并创建 分包以后可以提高用户打开程序时加载的速度
小程序自定义组件
自定义组件主要分为两步
1. 定义组件
一般我们都会将组件放入独立的文件夹components里,这个目录需要手动创建(列表下右键)
在创建完毕后需要在对应的JSON文件内设置:component: true 这表示当前这个文件是一个组件可以在全局内设置
需要注意的是组件内的js调用不是page而是components函数
2. 导入组件
在需要导入组件的文件JSON文件内部设置组件地址
导入成功后可以在对应的文件wxml中标签的形式来调用
当然也可以全局注册组件,在APP.JSON里面设置
如何引入Vant组件
- 首先先下载vant组件库(npm i @vant/weapp -S --production)
- 构建npm模块,构建同时会自动创建
miniprogram_npm目录存放构建好的代码
3. 在全局中配置(方法与全局注册组件形式相同)
踩坑
- 在发送请求时可能会遇到以下错误
解决方案如下
或勾选上
在构建npm时可能会遇到
这时候只需要 npm init -y即可解决