|
记录使用微信小程序的开发过程中遇到的各种难点及教程（不定时更新） 转载 2018-12-06 weixin_34311757 码龄4年 关注 本文为整理记录本人使用微信小程序开发产品的过程中，针对项目中业务需求所遇到的各种难点、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 src="../../utils/util.wxs" module="util" /> 但是用.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 */ <view>{{ price }}</view> //最终页面呈现为<view>123</view>，如果服务端接口返回的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目录下，最终结构为 然后在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点击事件的方法传参要这么写才行： <view bindtap="gotoDetails" data-searchType="{{ item.id }}"></view> //方法里这样获取点击事件要用的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项目那样，直接在括号里跟参数，会报错，哎，小程序有些地方真的反人类? <view bindtap="gotoDetails(id)"></view> 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属性 <view wx:for="{{ obj }}" wx:for-item="item" wx:for-index="key"> <view class='aside'>{{ key }}</view> </view> 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参数过去，比如我是这样写的： <van-cell-group> <van-cell icon="location-o" title="查看图表详情" url="/pages/Details_RegionSituation/Details_RegionSituation?id={{id}}&zip={{zip}}" is-link /> </van-cell-group> 然后这个图表模块的page页面获取上面穿过来的query参数，并进行拼接处理，处理好后setData设置webview的src，我是这样写的： <!--图表模块的采用webview组件的page页面——wxml--> <view class="page-body"> <view class="page-section page-section-gap"> <web-view src="{{ webviewURL }}"></web-view> </view> </view> <!--图表模块的采用webview组件的page页面——js--> 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从无到有只用了三四天时间，我就不用头疼麻烦的用小程序的自定义组建来实现需求了。 |
|
|
