|
作者:madcoder,來自原文地址
wepyjs 發(fā)布了四個月了,中間經(jīng)歷了很多版本更新,也慢慢開始有一些用戶選擇 wepyjs 作為開發(fā)框架來開發(fā)小程序,比如一些線上小程序。

以及一些來自網(wǎng)上的 wepyjs 的相關(guān)資源:
demo源碼: one,圖書管理系統(tǒng)
組件:圖表控件
因此我也將手機(jī)充值小程序在開發(fā)過程中 wepyjs 的應(yīng)用心得分享出來,可以參照對比與傳統(tǒng)小程序開發(fā)上的差異。
說明:本文不涉及到 wepyjs 的使用與說明,如果需要請參看我的另一篇文章 ”打造小程序組件化開發(fā)框架” 或直接參看wepyjs 項(xiàng)目地址。
開發(fā)時期望邏輯代碼按照業(yè)務(wù)模塊劃分,從視覺圖上來看,首頁可以分為五個模塊,分別是:
-
輸入框:Input
-
下拉歷史記錄:History
-
充話費(fèi):Mobile
-
充流量:Traffic
-
右下角菜單:Menu
如下圖:

在原生小程序中,可以使用小程序的模板特性來達(dá)到模塊化區(qū)別的目地,如下:
-
<!-- index.wxml -->
-
<import src="components/input"/>
-
<import src="components/history" />
-
<import src="components/mobile" />
-
<import src="components/traffic" />
-
<import src="components/menu" />
-
-
<view class="pageIndex">
-
<template is="comInput" data="{{number}}" />
-
<template is="comMobile" data="{{mobileList}}" />
-
<template is="comTraffic" data="{{trafficList}}" />
-
<template is="comMenu"/>
-
</view>
-
// index.js
-
var Input = require('./components/input');
|