258资源分享网

从小程序的发布，到现在已经有一年多的时间了，从当时信誓旦旦的要替代APP，到近期实现了APP和小程序互跳的功能，定位也悄然变为APP的一个补充，都是现实给逼的，就像当时卸载了摩拜和美团的APP，觉得只用小程序就行的同事，最后都又把APP装了回来，为什么呢？因为小程序只是实现了原有APP的部分功能，最后发现还是APP用着方便，毕竟现在手机内存基本都是32g起，一个APP也占不了多少地方。

技术无止境，人生莫等闲，开启正文。

技术栈

微信小程序

WePY

weappx

微信小程序官方文档已经很详细了，经过多次的更新，目前小程序已经支持自定义组件，引入其他开发者的插件和外部的资源，还有了一套小程序的语言wxs,据官方文档的说法在IOS上的运行速度比JavaScript要快2~20倍，组件和API也是越来越完善。

WePY是腾讯一团队出的一个小程序组件化开发框架，第一次更新是在2016.11.23，比小程序的发布时间2017.1.9还早，也就是说小程序在腾讯内测的时候，某个喜欢Vue大佬用了之后，发现这玩意开发起来不够爽呀，连组件都不支持，然后这个大佬就拉了一帮人，说兄弟们咱弄个框架出来吧，让大家能用类Vue的开发方式去开发小程序，然后你应该懂了，如果你会Vue，上手这个那是分分钟的事，它支持组件 Props 传值，自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等等。

weappx是一个小程序的状态管理框架，wepy和原生小程序都可以使用， API和Dva，Vuex挺像，但是比它们两个要简单的多，Dva已经把APi的数量精简到6个，它更狠才4个API就能上手，API虽然少但作为状态管理框架，该有的功能都是有的，开发起来还是相当的爽的，详细的介绍请看文档，相比Dva现在的9000多个star，weappx的50多个star显的有点寒酸，如果用了之后觉得挺不错的童鞋，都star下，精神上支持下作者。

遇到的坑以及开发注意点 1. repeat标签嵌套两级以及以上组件传值给自组件传值问题

这个问题其实是wepy的一个bug，在github上已经有好多人提过Issues，官方并没有给出解释，经过自己的摸索，有两种解决方式：

对于纯组件用小程序原生的模板template代替

子组件中第二层循环采用此写法，直接使用template

<template wx:key="{{index}}" wx:for="{{item.giftBoxs}}" wx:for-item="giftBoxsItem" data="{{...giftBoxsItem}}" is="indexMoItem"></template>

在主页面中引入此模板

<import src=http://www.yiyongtong.com/archives/"../../components/giftIndex/indexMoItem.wxml"/>

wepy最终会把所引用的组件代码，都打包到一个主页面中的,所以在主页面引入模板即可

第一种方法可以解决这个问题，并且还节省了代码量，但这属于wepy和原生小程序混写，后面又发现另一种解决办法

对于第二层循环要传的值，用repeat标签包裹一层

<repeat for="{{ [item] }}" key="item.orderNo" index="index" item="itemval"> <giftItem :itemval="itemval" ></giftItem> </repeat>

已经在wepy的Issues中做了回答，并有一个老铁点了赞，应该是帮他解决了这个问题

2. 向子组件传类似Object.key这样的值

正常传值

// 数据 data = { textMsg1: 'text1', textMsg2: { text: 'text2' }, } // 组件 <child :msg="textMsg1"></child>

界面展示

传对象中的值

<child :msg="textMsg2.text"></child>

界面展示

没有报错但是值也无法传递，这个问题也是Issues中提的比较多的,可采用下面方法解决

<repeat for="{{ [textMsg2.text] }}"> <child :msg="item"></child> </repeat> 3. 小程序开发工具变慢

在开发过程城中，随着项目文件的越来越大，会发现小程序的开发工具越来越慢，甚至一个跳转都要等几秒钟才能跳转过去，这个时候需要把小程序打包出来的文件dist文件夹删掉，然后重新打包，会快很多，wepy也提供了命令，直接运行 npm run clean 也能达到同样的效果。

4. 小程序在手机上预览，出现卡顿现象