艺龙微信小程序（龙岩微信小程序制作）

艺龙微信小程序（龙岩微信小程序制作）

#艺龙小程序框架

目录结构

├── README.MD├── app.js├── app.json├── app.wxss├── components├── image├── pages├── service└── utils ├── api.js ├── cookie.js ├── data-center.js ├── overwrite.js ├── page-events.js ├── path.js ├── promise.js └── service.js

框架使用说明

框架对所有微信原生api进行了一层包装，以便管控和扩展。

//index.jsvar api = require("./utils/api.js")();api.login({ success: function(res) { console.log(res); }});

//api.jslogin: function() { //其他处理 return wx.login(arguments);}

对于后端接口，框架提供service层进项管理，接口返回一个Promise对象。

//demo.jsvar Service = require("../utils/service.js");module.exports = { GetTime: Service({ url: 'https://xxx.xxx.xxx/api/getserverdate/', params: [], //参数列表 method: 'GET', noLoading: true, mockData: function() { //模拟数据 return new Date(); }, dataTransform: function(data) { //适配处理 return data; } })};

//index.jsvar service = require('service/demo'); //框架约定，所有的后端接口，要注册到对应的service文件中var serverDate = service.GetTime( /*service可配置参数列表，这里传入相对应的参数*/ ).then(function(date) { that.setData({ serverDate: date });});

小程序不支持cookie机制，若要兼容现有后端cookie处理（不做改动），可使用框架模拟的cookie机制。

//index.jsvar COOKIE = require('./cookie.js');var expire = new Date().getTime() + res.expire * 1000;COOKIE.set(key, value, expire);

//service.js//...headers["Cookie"] = Cookie.getAll(); //用户cookie将随http请求发送至服务器//...

Page() 函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等，框架对Page做了重写，这样可以方便的使用扩展能力，使用时仅需将原来的业务代码用包装器包装一下即可。

//微信小程序原生页面注册形式Page({ data: {}, onLoad: function() {}});//框架重写注册形式var __dirname = 'pages/index', __overwrite = require('../../utils/overwrite.js');(function(require, Page) { //重写require、Page Page({ data: {}, onLoad: function() {} });})(__overwrite.require(require, __dirname), __overwrite.Page);

globalData监听，框架支持全局事件监听机制

//index.jsvar __dirname = 'pages/index', __overwrite = require('../../utils/overwrite.js');(function(require, Page) { //获取应用实例 var app = getApp(); var service = require('service/demo'); Page({ data: { indate: '', indateText: '' }, onLoad: function() { this.listenerGlobalData('indate', function(indate) { this.data.indate = indate this.data.indateText = new Date(indate).format('MM-dd') }.bind(this)); } })})(__overwrite.require(require, __dirname), __overwrite.Page);

事件机制，页面间跳转可以传递数据，框架支持页面间传递数据的同时，还可以通过跳转接口返回的事件对象监听自定义事件。

//index页面var event = api.Navigate.go({ url: '../list/index', params: { name: 'billy' }});event.on("listok", function(params) { console.log(params);});

//http页面Page({ onLoad: function(data) { if (data.name === 'billy') { this.fireEvent("listok", 'hello ' + data.name); } }});

组件使用说明

内置组件

框架重写Page构造方法，内置了一些常用的组件，例如 alert、picker、setLoading，其中 alert 和 setLoading 内部分别封装了原生的 wx.showModal 、wx.showToast，封装使得调用参数结构化，方便业务使用，使用时不用引入页面结构，直接调用即可；picker则需要首先引入到页面中表现层结构，按照配置要求传递配置项。

//setLoadingthis.setLoading(true);//ture/false

//picker 引入表现层结构 {{current}}

//picker 使用__overwrite.picker({ content: "选择排序", init: this.data.sortIndex, data: this.data.sortList, bindtap: function(id, index) { if (that.data.sort != id) { that.setData({ sortIndex: index, current: this.data.sortList[index].text }); } }, bindcancel: function() { console.log('cancel') }});

//alert__overwrite.alert({ content: '弹框对话框，参数配置详见文档说明', cancelText: '取消', bindconfirm: function() { console.log('确定'); }, bindcancel: function() { console.log('取消'); }});

独立页面组件

独立页面组件其实就是一个完整的页面单元（js、wxml、wxss组成），使用很简单，通过引入相关js方法，调用打开组件即可（可传递callback用于数据交换处理）。--其实现原理是组件提供的js方法将会打开一个新页面（api.Navigate.go），并通过注册事件的形式交互行为数据

//index.jsvar __dirname = 'pages/externalComponent', __overwrite = require('../../utils/overwrite.js');require('../../utils/dateFormat.js');(function(require, Page) { //获取应用实例 var app = getApp(); var CalendarPlugin = require('components/calendar/index'); Page({ data: { date: { indate: new Date().format('yyyy-MM-dd'), outdate: new Date(+new Date + 3600000 * 24).format('yyyy-MM-dd') } }, openCalendar: function() { var that = this; CalendarPlugin({ begin: that.data.date.indate, end: that.data.date.outdate }, function(res) { that.data.date.indate = res.start.format('yyyy-MM-dd'); that.data.date.outdate = res.end.format('yyyy-MM-dd'); that.setData({ date: that.data.date }) }) }, onLoad: function(data) { } })})(__overwrite.require(require, __dirname), __overwrite.Page);

页面级组件

框架重写Page构造器，支持构建页面时配置一个或多个页面级组件，所谓页面级组件就是该组件的注册形式和页面一致(支持data数据，onLoad、onReady、onShow生命周期事件，fireEvent、showLoading等页面级方法)，其实现原理是将组件的所有成员方法和成员属性和依附页面进行合并，并解决了重名冲突，使用者不用关心处理细节，只管像注册一个页面一样注册组件。--需要注意的是页面级别组件不可再次使用Page构造方法。

1、引入组件表现层结构

2、引入组件样式表

/**引入组件样式表**/@import "filter/index.wxss";page { background: #f4f4f4; }

3、注册页面时注入组件

/** * 集成组件dome */var __dirname = 'pages/internalComponent', __overwrite = require('../../utils/overwrite.js');(function(require, Page) { /*引入组件js*/ var filter = require('./filter/index'); Page({ /** * 默认数据 * @type {Object} */ data: {...}, onLoad: function(options) {}, }, [{//注入组件 component: filter, instanceName: 'typeFilter', props: { style: { top: '44px' } }, events: { onChange: 'filterChangedCallBack', onOpen: 'filterOpenedCallBack', onClose: 'filterClosedCallBack' } }, { component: filter, instanceName: 'categoryFilter', props: { style: { top: '44px' } }, events: { onChange: 'filterChangedCallBack', onOpen: 'filterOpenedCallBack', onClose: 'filterClosedCallBack' } }])})(__overwrite.require(require, __dirname), __overwrite.Page)

页面级组件由*.js、*.wxml、*.wxss组成，分别由注册页面引入，其中js部分不可再次使用Page构造

├── index.js├── index.wxml└── index.wxss

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。