记录使用微信小程序的开发过程中遇到的各种难点及教程(不定时更新)

本文为整理记录本人使用微信小程序开发产品的过程中,针对项目中业务需求所遇到的各种难点、API问题、BUG、及教程整理?

1、wxml页面的 Mustache 语法(双大括号)数据绑定是不能使用全局js方法的,例如utils.js里面定义的时间日期格式化,价钱格式化等等公共函数方法。
只能用.wxs文件,这是文档:https://developers.weixin.qq....,并且.wxs文件只能使用es4语法,不支持es6语法,以及一些符号,比如我在vue项目里常用的这个邮箱正则
const emailReg = /[\w!#$%&'*+/=?^_{|}~-]+(?:.[w!#$%&'*+/=?^_{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; ,就会报错。
所以想要在.wxml页面使用全局方法的话,就先定义好.wxs文件的全局方法,然后如下引入就可以使用util.wxs里面的全局方法了,

但是用.wxs来做全局方法的话有局限性,例如moment.js和accounting.js,这种使用率比较大的第三方插件,.wxs文件是不能引用js文件的,只能引用.wxs文件。

所以这点很操蛋,只能继续使用 utils.js 在里面定义好全局方法,然后在app.js入口引入,

/**
 * 全局公共方法
 * @type {function}
 */
const utils = require('./utils/utils.js');

App({
    // 全局公共方法
    utils: utils,
})

接着,假如在test页面里,需要使用全局方法来处理数据的美元、RMB价钱以及平方英尺、平方米换算。使用方法很简单:在test.js里,在data里声明好变量,然后就可以在下面使用全局方法来处理数据了。
例子:

/* test.js */

// 获取全局应用程序实例对象
const app = getApp();

Page({
    /**
     * 页面的初始数据
     */
    data: {
        price: null,
    },
    
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //js里只能这样使用util全局方法,结合data声明的变量处理数据
        
        //此处是判断服务器接口返回的数据字段是否为null,如res.data.price = 123
        this.setData({ price: app.utils.isNull0(res.data.price) });
    },
})

/* test.wxml */

{{ price }}
//最终页面呈现为123,如果服务端接口返回的price字段是null的话,那么经过全局方法判断后,页面这里应该显示-

以上这些就是小程序page子路由页面如何使用utils全局方法的全部内容了,这一点算是我入手小程序这几天以来遇到的比较恶心?的了,相比用vue开发webapp项目,小程序这一点真的是反人类,很不方便?。

2、UI库的使用,我用了有赞的vant-weapp和iView-weapp。
使用方法:
vant-weapp:https://github.com/youzan/van...,
iView-weapp:https://github.com/TalkingDat...,
把代码包下载到本地后,把里面的dist目录放到小程序的components目录下,最终结构为
记录使用微信小程序的开发过程中遇到的各种难点及教程(不定时更新)_第1张图片

然后在app.json里面定义好usingComponents字段,用到哪个组件,按照其官方文档的使用指南,把组件引入到usingComponents里面就行了,注意相对路径要设置好,不然会报错。
例如我目前开发的小程序项目暂时用到了这几个组件,之后开发完以后,dist目录里没有用到的组件可以删掉。

"usingComponents": {
    "van-row": "../components/vant-weapp/dist/row/index",
    "van-col": "../components/vant-weapp/dist/col/index",
    "van-toast": "../components/vant-weapp/dist/toast/index",
    "van-notify": "../components/vant-weapp/dist/notify/index",
    "van-tab": "../components/vant-weapp/dist/tab/index",
    "van-tabs": "../components/vant-weapp/dist/tabs/index",
    "van-search": "../components/vant-weapp/dist/search/index",

    "i-spin": "../components/iView-weapp/dist/spin/index",
    "i-button": "../components/iView-weapp/dist/button/index",
    "i-drawer": "../components/iView-weapp/dist/drawer/index"
}

3、小程序的页面间跳转有些规则的,vue开发wabapp项目,跳转路由一般使用编程式导航的话是这样的:

this.$router.push({path: "/houseDetails", query: {id: id}});
//传参在query里定义。

而小程序的跳转有4种:
(1)、wx.navigateTo(Object object);//保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
(2)、wx.redirectTo(Object object);//关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
(3)、wx.reLaunch(Object object);//关闭所有页面,打开到应用内的某个页面
(4)、wx.switchTab(Object object);//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

刚开始开发首页的时候,用bindtap点击事件绑定一个方法,在里面用 navigateTo 怎么点都不跳转,没反应,第二天仔细看文档才发现,要跳转的页面是 tabBar 页面,所以向 tabBar 页面跳转的时候,不能使用navigateTo,要用 switchTab 方法来跳转?。

4、安装npm第三方插件,参考此文档,https://developers.weixin.qq....。
具体步骤:
(1)、先在本项目里打开命令行,然后npm install --production
(2)、跑完以后,比如要安装moment.js 则 npm install moment --save
(3)、安装完后 去微信开发者工具里找到菜单栏 -> 工具 -> 构建npm 点击执行,等待完成。
(4)、构建完后,项目根目录里会多出一个miniprogram_npm目录,里面就是安装好的moment.js插件。
然后在utils.js引用:

// moment时间格式化
import moment from 'moment';
// moment.locale('zh-cn');//加载中文包

然后就可以在下面的全局方法 momentFormat(函数名自己取的) 里利用moment.js的 API 正常处理数据了。

5、js里的方法不能用es6的箭头函数,只能用function(),否则会报错this指向,查看报错信息里,this是undefined,暂不知是什么原因。
例如:

keywordChange: app.utils.debounce((e) => {
    this.setData({ searchKeyword: e.detail });//此时的this是undefined  所以这行会报错
    if (app.utils.getByteLen(e.detail) > 3) {
        this.setData({ searchLoaderShow: true });
    }
}, 500)

keywordChange: app.utils.debounce(function(e) {
    this.setData({ searchKeyword: e.detail });//不用es6的箭头函数就没问题
    if (app.utils.getByteLen(e.detail) > 3) {
        this.setData({ searchLoaderShow: true });
    }
}, 500)

6、bindtap点击事件的方法传参要这么写才行:



//方法里这样获取点击事件要用的key-value
gotoDetails(e){
    let url = '/pages/details/details?id='+ e.currentTarget.dataset.searchtype;
    //这里有个坑,绑定事件的设置参数,如果参数名有大写字母的话,下面获取的时候要用小写的,不然会报错undefined。例如:data-searchType -> e.currentTarget.dataset.searchtype
    wx.navigateTo({
        url: url
    })
}

//不能像vue项目那样,直接在括号里跟参数,会报错,哎,小程序有些地方真的反人类?

7、报错:wx.switchTab: url 不支持 queryString
意思是tabBar页面不支持url传参,只能利用app.js定义好globalData里的query参数,在要跳转的页面里赋值,就可以了。

8、吐槽下微信开发者工具的版本管理,真TMD难用,还不如直接用命令行操作git来的方便,跟intellij IDEA 内置的Git管理工具差远了。
附个微信开发者工具的版本管理的设置教程:https://static.oschina.net/ne...

9、微信小程序设为体验版后,不能加载数据,进去首页后会弹个Toast 轻提示 报错:Object Object
经过百度搜索,可能是这些原因:域名已经备案、https已经配置、ssl证书在1.2以上版本、小程序后台已经配置服务器域名

10、小程序遍历对象要用wx:for-index属性


    {{ key }}

11、小程序的自定义组件有些像vue的组件化,比如详情页类型的内容结构复杂的页面或者是有2处及以上有复用需求的,可以用自定义组件来实现,具体教程可参考:
https://developers.weixin.qq....
https://blog.csdn.net/qq_4181...
注意:自定义组件不能用wxs。

12、如果小程序页面要做echarts图表可视化功能,但是echarts图表有很多,需要进行封装,这种情况最好还是采用小程序的webview API来实现,
具体教程可参考:
https://developers.weixin.qq....
https://www.jianshu.com/p/292...

已经有做好的webAPP项目,但是要同步开发小程序,详情页有很多echarts图表,这种情况就很适合用webview,我刚开始的时候不知道webview,在研究自定义组件,在构思怎么封装全局可使用的line、bar、pie、面积图这四种公共组件,当时没想好怎么做,很麻烦。后来CTO告诉我用webview来实现。

比如已经做好了一个vue框架的webapp项目,然后只需要vue-cli再起一个vue项目,然后把以前做好的详情页图表相关的代码结构照搬过来就行了,无非就是改一点儿东西。

比如我的web端项目的详情页加起来有9个模块,近百个echarts图表,如果用户初次进入页面就加载全部的接口,那么浏览器内存会很高,用户会卡死几秒的时间,体验很差,所以用户初次进入页面是默认不加载图表相关接口的。我采用了每个模块做成折叠面板的方案,点击展开时展示该模块下的所有图表,收起时销毁图表实例释放内存,并且只在第一次展开时加载接口,后面收起再展开时就不需要重复请求接口了。

而小程序webview所需的vue项目,比如详情页9个模块,可以在小程序里定义为9个page页面,然后点击每个模块时跳转到这个模块对应的page页面,并且把这个模块下所有图表所需的参数(比如商品id),通过url传过去。然后这个page的wxml里放webview组件,动态设置src。js里获取从详情页点击模块跳转过来时所携带的query参数,拼接好以后,setData设置webviewURL。大概是这样:


点击图表模块时跳转到这个模块对应的page页面,并且携程必备query参数过去,比如我是这样写的:


    

记录使用微信小程序的开发过程中遇到的各种难点及教程(不定时更新)_第2张图片

然后这个图表模块的page页面获取上面穿过来的query参数,并进行拼接处理,处理好后setData设置webview的src,我是这样写的:



    
        
    



data: {
    id: null, //商品id
    zip: null,
},
onLoad: function (options) {
        // console.log(options)
        //获取url参数
        this.setData({
            id: options.id || null,
            zip: options.zip || null
        });

        let url = `https://-----此处为你配置的业务域名-------/situation?id=${this.data.id}&zip=${this.data.zip}`;
        
        // situation为模块页面名称,随便你怎么定义。后面就是query参数

        this.setData({
            webviewURL: url
        });
},

【之所以项目详情页里有9个图表模块,小程序就要新建9个page页面,是因为一个page页面只能放一个webview组件,并且会覆盖掉其他组件。】

然后在vue项目里获取到小程序webview src跳转的时候携带的query参数,然后进行接口请求数据,配置图表,就完事儿了。
记得退出页面时也要销毁图表实例,vue项目的生命周期是这样的:

 beforeDestroy () {
    if(this.myEcharts){
        this.myEcharts.dispose();
    }
},

具体流程就是以上这些了,并不复杂。

这样下来节省了大量的工作,详情页9个图表模块,加起来近百个echarts图表,用webview从无到有只用了三四天时间,我就不用头疼麻烦的用小程序的自定义组建来实现需求了。

你可能感兴趣的:(记录使用微信小程序的开发过程中遇到的各种难点及教程(不定时更新))