自学小程序的第二天--Vue语法与小程序语法的区别

154 阅读3分钟

1.循环

在小程序中也有循环遍历数据的方法 wx:for="{{遍历的数据}}"--这里有需要有一个唯一的key:wx:key="{{唯一值}}" 在循环中默认有item和index,item表示每一个单元,index是数据的下标,如果想改变item和index属性名可以通过,wx:for-item/index='xxx'来修改

image.png 2. 条件渲染

wx:if="{{变量}}"来进行选择性渲染

生命周期

小程序也有生命周期,只不过语法与Vue不相同

  1. onLaunch表示页面打开时执行的函数,只会在页面打开时执行,只执行一次

  2. onShow表示当前页是否在显示前台

  3. onReady在页面渲染完成时执行的函数,只执行一次

  4. onHide监听小程序是否切换为后台

这些生命周期通常用来获取场景ID 常见的场景ID:

  1. 1001表示发现小程序的主入口
  2. 1011通过扫描二维码
  3. 1007通过分享进入

小程序的常见API

  1. wx.request用来发送请求获取数据---语法:

image.png 这里因为时get请求,method就可以省略,data为传参

在小程序中的API大部分都是有success和fail两个回调函数

success表示成功的回调----fail表示失败的回调

在这里发送请求可能会发生错误,具体请看结尾个人踩的坑

  1. wx.getUserProfile用来获取用户信息---语法如下

image.png des暂时还未有使用场景---待补充 需要注意的是,这个方法一般是写在点击事件上,当用户点击后会显示一个弹框

image.png

当用户点击了确定会执行success回调函数 点击取消会执行fail回调函数

  1. wx.chooseAddress获取用户收货地址---语法如下

image.png 可以在onLoad这个生命周期写,在页面打开时获取用户的收货地址

如果想了解更多的API

请点击

分包

分包就是将一些页面和相关的逻辑单独加载---实现 在app.文件通过subPackages配置并开启分包功能

image.png 这里的root可以认为是文件夹,如果列表内没有改文件夹,那么会创建一个

pages表示文件夹内的文件,在创建文件夹时会一并创建 分包以后可以提高用户打开程序时加载的速度

小程序自定义组件

自定义组件主要分为两步

1. 定义组件

一般我们都会将组件放入独立的文件夹components里,这个目录需要手动创建(列表下右键)

image.png 在创建完毕后需要在对应的JSON文件内设置:component: true 这表示当前这个文件是一个组件可以在全局内设置

需要注意的是组件内的js调用不是page而是components函数

2. 导入组件

在需要导入组件的文件JSON文件内部设置组件地址

image.png 导入成功后可以在对应的文件wxml中标签的形式来调用

当然也可以全局注册组件,在APP.JSON里面设置

image.png

如何引入Vant组件

  1. 首先先下载vant组件库(npm i @vant/weapp -S --production)
  2. 构建npm模块,构建同时会自动创建miniprogram_npm目录存放构建好的代码

image.png 3. 在全局中配置(方法与全局注册组件形式相同)

image.png

踩坑

  1. 在发送请求时可能会遇到以下错误

image.png

解决方案如下

image.png

image.png

image.png

或勾选上

image.png

在构建npm时可能会遇到

image.png 这时候只需要 npm init -y即可解决