用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

天下雪 2017-4-10 00:00

作者:madcoder,来自原文地址wepyjs 发布了四个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序。以及一些来自网上的 wepyjs 的相关资源:demo源码 ...

作者: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. <view class="pageIndex">
  8. <template is="comInput" data="{{number}}" />
  9. <template is="comMobile" data="{{mobileList}}" />
  10. <template is="comTraffic" data="{{trafficList}}" />
  11. <template is="comMenu"/>
  12. </view>
  1. // index.js
  2. var Input = require('./components/input');
  3. 邀请
    鲜花
    鲜花 (1)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (1 人)

    分享至 : QQ空间
    收藏
    来自: 原文地址

    相关阅读

    • 天下雪 2017-4-11 11:03
      me_fujing: 这个wepy怎么用 看了半天也没看明白
      晚点我要聚合一下全网相关内容
    • me_fujing 2017-4-10 17:08
      这个wepy怎么用 看了半天也没看明白