个人技术分享

承蒙眷顾，不胜惶恐

微信小程序的一些注意事项

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 3.8k 阅读时长 ≈ 3 分钟

主要记录一些小程序开发过程中需要注意的一些点，以及相关知识的学习。

wx.navigateTo 跳转页面，不能使 tabbar 页面。小程序的页面栈最多是10层。

小程序的绑定事件传参：

1
2
3
4
5
6
7
8
9
10
11
12
13
<block wx:for='{{cardList}}'>
    <view class="index-card-item" data-card='{{item}}' bindtap='bindJumpPage'>
        <image src="{{item.img}}" class="index-card-img" />
        <text class="index-card-text">{{item.text}}</text>
    </view>
</block>

bindJumpPage: function(event) {
    const item = event.currentTarget.dataset.card;
    wx.navigateTo({
        url: item.link,
    })
},

view 和 block 标签

view 和 block 标签的区别在于，view 是一个视图容器组件，会在页面渲染，而 block 是仅仅是一个包装元素，仅根据属性做逻辑判断，并不会在页面渲染。

关于静态资源加载

推荐使用绝对路径加载资源，避免作为属性值传入到组件中造成资源加载出错。

关于生命周期

小程序中关于生命周期的概念，大致分为三类：小程序的生命周期、页面的生命周期、组件的生命周期。

1）小程序的生命周期
App() 是用来注册小程序的方法，且只能在app.js中调用，必须调用且只能调用一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
App({
    // 生命周期回调，监听小程序初始化
    // 全局只能触发一次
    onLaunch: function() {
        console.log('App onLaunch');
    },
    // 生命周期回调，监听小程序显示，
    // 小程序启动，活动后台进入前台显示时触发
    onShow: function() {
        console.log('App onShow');
    },
    // 生命周期回调，监听小程序隐藏
    // 小程序从前台进入后台时
    onHide: function() {
        console.log('App onHide');
    },
    // 错误监听函数，小程序发生脚本错误，或者调用api失败时触发
    // 会带上错误信息
    onError: function(e) {
        console.log('App onError');
    },
    // 404，小程序打开的页面不存在时触发，会带上页面信息
    onPageNotFund: function(e) {
        console.log(e);
    }
});
  1. 页面的生命周期
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    Page({
        /**
         * 页面的初始数据
         */
        data: {},
        // 生命周期函数--监听页面加载
        // 一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数
        onLoad: function (options) {

        },
        // 生命周期函数--监听页面显示
        // 页面显示/切入前台时触发
        onShow: function () {

        },
        // 生命周期函数--监听页面初次渲染完成
        // 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
        // 注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。
        onReady: function () {
            
        },
        // 生命周期函数--监听页面隐藏
        // 页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面，小程序切入后台等
        onHide: function () {

        },
        // 生命周期函数--监听页面卸载
        // 页面卸载时触发，如redirectTo或 navigateBack到其他页面时。
        onUnload: function () {

        },
    })
  2. 组件的生命周期
    组件的生命周期，指组件自身的一些方法，在特定的事件节点或特定的事件时自动触发。
    最重要的生命周期是 created attached detached, 包含一个组件实例生命流程的最主要时间节点。
    • 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
    • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
    • 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Component({
    lifetimes: {
        attached() {
            // 在组件实例进入页面节点树时执行
        },
        detached() {
            // 在组件实例被从页面节点树移除时执行
        },
    },
    // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
    attached() {
        // 在组件实例进入页面节点树时执行
    },
    detached() {
        // 在组件实例被从页面节点树移除时执行
    },
    // ...
})
生命周期参数描述
created无在组件实例刚刚被创建时执行
attached无在组件实例进入到页面节点树时执行
ready无在组件在视图层布局完成后执行
moved无在组件实例被移动到节点树另一个位置时执行
detached无在组件实例被页面节点树移除时执行
errorObject Error每当组件方法抛出错误时执行

在微信小程序中引入 iconfont

平时用习惯了iconfont，但是在小程序该如何使用，其实用法也是很简单。

  1. 首先将所需要用到的字体图标，组成一个项目并下载到本地。
  2. 下载到本地的文件目录如下， 3）然后选择项目需要的文件，iconfont.css/eot/svg/ttf/woff/woff2，放到小程序assets目录下，并将iconfont.css修改为iconfont.wxss，小程序才能识别。
  3. 在app.wxss中引入
    1
    @import '/assets/iconfont/iconfont';
  4. 小程序可以愉快的使用了
    1
    <i class="iconfont icon-gouwu"></i>

小程序中图片预览和长按保存到本地

关于图片的预览，小程序提供了 wx.previewImage 的API，在预览过程中可以进行保存图片，发送给朋友等操作，是微信内置的。

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.previewImage({
    urls: [],//需要预览的图片链接列表，必填
    current: '',// 当前显示图片的链接，非必填
    success() {
        // 接口调用成功回调方法，非必填
    },
    fail() {
        // 接口调用失败毁掉方法，非必填
    },
    complete() {
        // 接口调用结束的回调函数，非必填（成功或失败，都会执行)
    }
})

如果是通过自定义方法取触发图片保存到本地相册，使用 wx.saveImageToPhotosAlbum，使用该方法需要用户授权 scope.writePhotosAlbum。

1
2
3
4
5
6
7
8
9
10
11
12
wx.saveImageToPhotosAlbum({
    filePath: '', // 必填，图片文件路径，可以是临时文件路径或者永久文件路径，不支持网络图片路径
    success() {
        // 非必填，接口调用成功的回调函数
    },
    fail() {
        // 非必填，接口调用失败回调函数
    },
    complete() {
        // 非必填，接口调用结束的回调函数（成功或失败，都会执行)
    }
})