微信小程序开发基础

据说幸运很容易
509 阅读10分钟

微信公众平台登录入口：mp.weixin.qq.com/

微信小程序的官方文档：developers.weixin.qq.com/miniprogram…

以下内容是本人学习小程序的一些知识总结，不过学到一半就没有一边学一边写了😭，后面碰到没见过的再补上😁。

注意：如果颜色报错或者没有效果，看文档对应属性的支持格式。

快捷键合集

  • 按住Alt可以选择多个位置编辑
  • 选中需要上/下移动的代码，按住Alt和PgUp/PgDn可以实现代码上/下移

一、全局配置app.js

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

1、pages字段

用app.json新建一个页面,在page节点下配置并保存后会生成一个文件，并带有初始化文件。

 "pages":[
    "pages/demo01/demo01", 
    "pages/index/index",
    "pages/logs/logs"   
  ]

image.png

注意：page节点下第一个页面就是打开小程序时显示的页面。

js文件中需要渲染的数据放到data节点下，不需要渲染的辅助变量可以和data同层级。data中的数据赋值用this.setData({变量名:...})方法，data之外的变量赋值直接this.变量名=...

另外，如何用VScode编辑小程序？

  • 安装vscode weapp api，这是小程序的语法结构api插件。
  • 接着安装vscode wxml这个插件，主要是针对wxml文件的。
  • 接着继续搜索安装vscode-wechat这个插件。
  • 安装一下Easy WXLESS，是针对wxss文件。
  • 安装好插件以后，我们直接在vscode里面编辑小程序项目，保存即可同步到小程序开发工具中。

注意：如果用vscode编辑虽然app.json中page节点下会显示，但是不会创建文件。需要在微信开发者工具中保存app.json文件才能创建文件。

2、window字段

backgroundColor—窗口的背景色，指的是下拉刷新的部分的背景色，不是页面的背景色，页面的背景色在wxss中修改。

enablePullDownRefresh—是否开启全局的下拉刷新，默认为false

3、tabBar字段

底部 tab 栏

微信开发者工具敲一个t点击tabBar提示可以出来一个模板。

list属性

  • pagePath对应pages字段中的值
  • selectedIconPath为选中时的图片路径

注意：list数组中的对象不能少于两个，第一个对象的地址必须是首页的地址。

position属性

决定tab栏的位置，bottom或者top。当设置为top时，不显示图标。

二、页面配置 page.json

此处的page.json指的页面的json文件。每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

三、模板语法

3.1 数据绑定

3.1.1 普通写法

<view>{{message}}</view>

Page({
  data: {
    message: 'Hello MINA!'
 }
})

3.1.2 组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

3.1.3 bool类型

不要直接写checked="false"，其计算结果是一个字符串

<checkbox checked="{{false}}"> </checkbox>

注意：引号和花括号之间一定不要存在空格否则会导致识别失败，错误示例：

<checkbox checked=" {{isChecked}}"></checkbox>

3.2 运算

运算针对表达式

注意：区分表达式和语句

  • 表达式：指一些简单运算，如三元运算、算数运算、逻辑判断、字符串运算等等
  • 语句：复杂的代码段，如：if else 、switch、do while、for

3.3 列表渲染

3.3.1 wx:for

1、各个属性

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

2、注意 ：

  • wx:key中直接用数组对象中的属性名即可 不能写成 循环项的名称.属性。

  • wx:key="*this" 表示 数组是一个普通数组 *this 表示 循环项。普通数组，如：[2,4,5],["dfa","tr"]等 。保留字 *this，它的意思是item本⾝，*this代表的必须是唯⼀的字符串和数组。

  • 为了避免出现奇怪的问题 wx:key的值不要乱写，虽然wx:key处不会报错

3、出现数组嵌套时 一下绑定的名称 不要重名。 wx:for-item="item" wx:for-index="index"

4、默认情况下，不写 wx:for-item="item" wx:for-index="index"小程序会把循环项的名称 和 索引的名称 默认为 item 和 index.只有一层循环的话 可以省略。

5、对象循环wx:for="{{数组或者对象}} wx:for-item="对象的值" wx:for-index="对象的属性" 循环对象的时候， 最好把item和index名称修改一下。 如: wx:for-item="value" wx:for-index="key"

特别注意：wx:for="{{}}"一定要写成插值表达式

3.3.2 block

  • 占位符标签
  • 写代码时可以看到标签存在
  • 页面渲染 小程序会把它移除
  • 使用场景：循环/渲染数据时不想额外加一层标签 可以使用block标签进行占位
<block 
wx:for="{{list}}" 
wx:key="id">
  <text>id：{{item.id}} </text>
  <text>name：{{item.name}}</text>
</block>

image.png

3.3 条件渲染

1、 wx:if="{{true}}/{{false}}"

if , else if, else

wx:if

wx:elif

wx:else

2、 hidden

（1） 在标签上直接加入属性 hidden

（2） hidden="{{true/false}}"

3、 使用场景

（1）切换显示不频繁 优先使用 wx:if(wx:if 直接把标签从页面移除)

（2）频繁 优先使用 hidden(hidden 添加样式的方式切换显示 display:none)

注意：hidden 不要和display样式一起使用

四、小程序事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如bindtap、bindinput 、bindchange等

不同的组件⽀持不同的事件，具体看组件的说明即可。

  • wxml文件中
<input bindinput="handleInput" />
  • js文件Page节点下
Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

注意：

  • 1、绑定input事件 关键字 bindinput
  • 2、获取输入框的值 通过事件对象来获取 e.detail.value
  • 3、把输入框的值赋值到data中。不能直接 this.num=e.detail.value/this.data.num=e.detail.value 正确的写法：
this.setData({
num:e.detail.value
 })
  • 4、绑定点击事件 (1) 关键字 bindtap

(2) 无法在小程序的事件中直接传参

(3) 通过自定义属性的方式来传递参数

<button bindtap="handletap" data-operation="{{1}}">+</button>

(4) 事件源中获取自定义属性

 handletap(e){
    var o = e.currentTarget.dataset.operation
 }

  • 5 获取data中的值，this.data.dataName

  • 6 设置data中的值

this.setData({
       num:this.data.num+1
    })

轮播图使用： （1）结构

<swiper>
     <swiper-item > 
            <navigator>
                <image mode="widthFix"></image> 
              </navigator>
      </swiper-item>
</swiper>

（2）样式(less)

swiper{
    width: 100%;
    height: calc(100vw*图片高/图片宽);
    image{
        width: 100%;
    }
}

注意：less中使用calc的时候要注意 加~'calc()'才可以实现原样保存到css中，否则css直接是计算后的值。另外，+ 和 - 运算符的两边必须要有空白字符

五、页面生命周期

  • onLoad:发送异步请求来初始化页面数据
  • onUnload：用navigator跳转时open-type选择关闭当前页面时触发。
  • onPullDownRefresh:页面的数据或者效果重新刷新
  • onReachBottom页面出现上下滚动才行，可以用来上拉加载下一页数据
  • onTabItemTap：必须要求当前页面时tabbar页面，点击自己的tab item时才触发
  • onResize：小程序发生了横屏/竖屏切换的时候触发。需要再json文件中配置：
"pageOrientation": "auto"

六、具体做页面练习碰到的一些注意事项

a、小程序的缓存技术

（1）获取本地存储中的数据

  const Cates=wx.getStorageSync('cates');

（2）把接口的数据存入到本地存储中（格式：{time:Date.now(),data:[...]}）

  wx.setStorageSync('cates',{time:Date.now(),data:this.Cates})

web中和小程序缓存的区别

1、方法不同

web: localStorage.setItem("key","value") localStorage.getItem("key")

小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");

2、存的时候有没有做类型转换

web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去

小程序: 不存在类型转换的这个操作，存什么类似的数据进去，获取的时候就是什么类型。

页面之间传值

  • 利用navigator标签跳转时可以在url后拼接需要传递的值。 如：
<navigator url="/pages/goods_detail/index?goods_id={{item.goods_id}}"></navigator>
  • 在跳转到的页面中利用生命周期函数onLoad的options参数得到传递过来的参数
 onLoad(options) {
        const {goods_id}=options
 }

b、页面跳转传值注意事项

onShow不同于onLoad无法在形参上接收options参数。

在onShow中获取页面传递过来的参数：

1、获取当前的小程序的页面栈-数组，长度最大是10页

let pages=getCurrentPages();

2、数组中，索引最大的页面就是当前页面，通过当前页面的内容获取传递过来的参数

let currentPage=pages[pages.length-1];
console.log(currentPage.options);

组件

1、创建

新建一个文件夹，然后再文件夹上点击鼠标右键->点击新建Component->输入组件名称回车就可以看到组件的四个基本文件了。

2、组件js文件各节点用法

（1）properties：用来接收父页面传递过来的数据。可以用type指明数据类型，value指明默认值。例如：

properties: {
        tabs:{
            type:Array,
            value:[]
        }
    }

（2）methods：定义组件中的方法。页面中的方法是直接写到data同层级下的。

（3）data：和页面一样，定义数据。

3、子组件与父组件（页面）传值和绑定事件

（1）页面引用组件：

  • json文件usingComponents节点下引入组件—"组件名":"路径"
  • wxml中将组件名作为标签
"usingComponents": {
        "Tabs":"../../components/Tabs/Tabs"
    }

<Tabs></Tabs>

（2）传值：组件标签上给组件对应的properties节点下变量赋值

<Tabs tabs="{{tabs}}"></Tabs>

（3）事件绑定（组件中触发事件把事件数据传递给页面）：

  • 组件事件处理函数中使用triggerEvent('事件名称',数据)方法
methods: {
        handleItemTap(e){
            const {index}=e.currentTarget.dataset;
            this.triggerEvent("tabsItemChange",{index})
        }
    }
  • 页面中绑定triggerEvent定义的事件名称，再对页面绑定事件做相应操作
<Tabs bindtabsItemChange="handleTabsItemChange"></Tabs>
  • 另外，可以通过页面绑定事件的事件源e的detail属性获取组件在triggerEvent方法中传递过来的数据

c、用户上滑页面滚动条触底，开始加载下一页数据

1、找到滚动条触底事件onReachBottom

2、判断还有没有下一页数据

（1）获取到总页数，而接口数据只有总条数 总页数=Math.ceil(总条数 / 页容量pagesize)

（2）获取到当前的页码 pagenum

（3）判断当前的页码是否大于等于总页数，表示有没有下一页数据。

3、没有下一页数据，给出提示

可以使用 wx.showToast 显示消息提示框。例如：

 wx.showToast({title:'没有下一页数据'})

image.png

4、有下一页数据，加载下一页数据

（1）当前的页码++

（2）重新发送请求

（3）数据请求回来对data中的数组进行拼接而不是全部替换。

this.setData({
            // 拼接数组
            goodsList:[...this.data.goodsList,...res.goods]
        })

d、下拉刷新页面

1、触发下拉刷新事件

  • 需要在页面的json文件中开启一个配置项
"enablePullDownRefresh":true

下拉小圆点颜色修改："backgroundTextStyle":"dark/light"

2、重置数据数组

3、重置页码，设置为1

4、重新发送请求

5、数据请求回来，需要手动关闭等待效果（可以写到请求数据函数的末尾，即等数据请求成功调用）

// 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭也不会报错
        wx.stopPullDownRefresh();

e、添加全局的正在加载中图标效果

发送请求之前：

wx.showLoading({
        title: '加载中',
        mask: true
    });

拿到请求过来的数据之后

wx.hideLoading();

注意：如果存在同时发送异步请求，最好设置一个变量来记录，直到最后一次请求完成再关闭效果。

f、预览大图

 wx.previewImage({
            urls:"Array.<string>", //需要预览的图片链接列表
            current:"String" // 当前显示图片的链接，不填则默认为 urls 的第一张
         })

g、获取用户的收货地址

wx.chooseAddress({
       success: (result) => {
         console.log(result);  
       }
   })

image.png

h、弹窗提示

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

image.png

六、使用微信开发者工具需要注意的问题

1、向外发送数据请求时需要注意接口是不是已经放入服务器域名（使用自己注册的AppID）

image.png 如果没有或者使用测试的AppID，那么一定要在开发者工具中打开 详情-本地设置-不校验合法域名。

image.png

否则会出现此类错误：

image.png

总结：微信小程序中封装了很多挺实用的功能，使用时需要详细阅读官方API。

avatar
文章
阅读
粉丝