wepyjs 在手机充值小程序中的应用

作者：madcoder，来自原文地址

wepyjs 发布了四个月了，中间经历了很多版本更新，也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序，比如一些线上小程序。

以及一些来自网上的 wepyjs 的相关资源：

demo源码： one，图书管理系统
组件：图表控件

因此我也将手机充值小程序在开发过程中 wepyjs 的应用心得分享出来，可以参照对比与传统小程序开发上的差异。

说明：本文不涉及到 wepyjs 的使用与说明，如果需要请参看我的另一篇文章 ”打造小程序组件化开发框架” 或直接参看wepyjs 项目地址。

组件化

开发时期望逻辑代码按照业务模块划分，从视觉图上来看，首页可以分为五个模块，分别是：

• 输入框：Input
• 下拉历史记录：History
• 充话费：Mobile
• 充流量：Traffic
• 右下角菜单：Menu

如下图：

在原生小程序中，可以使用小程序的模板特性来达到模块化区别的目地，如下：

1. <!-- index.wxml -->
2. <import src="components/input"/>
3. <import src="components/history" />
4. <import src="components/mobile" />
5. <import src="components/traffic" />
6. <import src="components/menu" />
7.  
8. <view class="pageIndex">
9. <template is="comInput" data="{{number}}" />
10. <template is="comMobile" data="{{mobileList}}" />
11. <template is="comTraffic" data="{{trafficList}}" />
12. <template is="comMenu"/>
13. </view>

1. // index.js
2. var Input = require('./components/input');