#艺龙小程序框架
> 目录结构
```
├── 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
```
> 框架使用说明
- 框架对所有[微信](https://mp.weixin.qq.com/debug/wxadoc/dev/)原生`api`进行了一层包装,以便**管控**和**扩展**。
```js
//index.js
var api = require("./utils/api.js")();
api.login({
success: function(res) {
console.log(res);
}
});
```
```
//api.js
login: function() {
//其他处理
return wx.login(arguments);
}
```
- 对于后端接口,框架提供`service`层进项管理,接口返回一个**Promise**对象。
```js
//demo.js
var 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.js
var service = require('service/demo'); //框架约定,所有的后端接口,要注册到对应的service文件中
var serverDate = service.GetTime( /*service可配置参数列表,这里传入相对应的参数*/ ).then(function(date) {
that.setData({
serverDate: date
});
});
```
- 小程序不支持`cookie`机制,若要兼容现有后端`cookie`处理(不做改动),可使用框架模拟的**cookie机制**。
```js
//index.js
var 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`做了重写,这样可以方便的使用扩展能力,使用时仅需将原来的业务代码用包装器包装一下即可。
```js
//微信小程序原生页面注册形式
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`监听,框架支持全局事件监听机制
```js
//index.js
var __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);
```
- 事件机制,页面间跳转可以**传递数据**,框架支持页面间传递数据的同时,还可以通过跳转接口返回的事件对象监听**自定义事件**。
```js
//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**则需要首先引入到页面中表现层结构,按照配置要求传递配置项。
```js
//setLoading
this.setLoading(true);//ture/false
```
```html
//picker 引入表现层结构
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<text class="userinfo-nickname">{{current}}</text>
</view>
<include src="../../components/base.wxml" />
</view>
```
```
//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`),并通过注册事件的形式交互行为数据*
```js
//index.js
var __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、引入组件表现层结构
```html
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!--当前页面数据-->
</view>
<!--引入组件页面结构-->
<include src="../../components/base.wxml" />
</view>
```
> 2、引入组件样式表
```css
/**引入组件样式表**/
@import "filter/index.wxss";
page { background: #f4f4f4; }
```
> 3、注册页面时注入组件
```js
/**
* 集成组件dome
*/
var __dirn
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
小程序,开发工具导入项目即可查看源码分享 小程序是一个易上手的东西, 对于新手来说,多看官方文档,可以初步做出比较完整的小程序,正是因为简单上手,功能实现简单,小程序是越来越火,商业价值也越来越大。 1. 微信web开发者工具:微信小程序官网 这是个比较好用的编辑器,对于小程序编辑很方便。 2. 开发文档:微信小程序宝典秘籍 通过这个查找微信小程序的API,组件,框架等等。 3. 图标库: Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标,十分方便。 4. Easy Mork: easy-mock 用于后台的模拟,得到JSON数据; 5. weui框架引入, 例如个人信息界面,用weui可以很快很方便的做 微信小程序开发和传统的H5开发还是有些不同的, 容易踩坑。 小程序是基于MVVM的的框架,合理利用数据绑定实现界面的更新是很关键的 开发时不要一股脑的写写写,多看看文档,你会发现你不小心原生写了个组件。。 进入开发平台,注册项目信息->在编辑器中上传版本->在开发版本中选择提交审核->审核通过->项目上线 更多内容下载项目即可查看
资源推荐
资源详情
资源评论
收起资源包目录
基于微信小程序实现艺龙旅行网工具小程序源码分享 (120个子文件)
._calendar 212B
._components 212B
._externalComponent 212B
._filter 212B
._http 212B
._image 212B
._index 212B
._internalComponent 212B
._page 212B
._pages 212B
._partComponent 212B
._service 212B
._users 212B
._utils 212B
._XCX-scaffold-master 212B
开发微信小程序项目遇到的问题以及解决方案.docx 1.94MB
._开发微信小程序项目遇到的问题以及解决方案.docx 212B
index.js 17KB
overwrite.js 15KB
api.js 7KB
index.js 5KB
service.js 5KB
cookie.js 3KB
index.js 2KB
promise.js 2KB
index.js 2KB
index.js 2KB
data-center.js 1KB
index.js 1KB
app.js 1011B
page-events.js 854B
path.js 756B
dateFormat.js 701B
index.js 684B
index.js 633B
demo.js 445B
index.js 246B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._index.js 212B
._app.js 212B
._index.js 212B
._data-center.js 212B
._path.js 212B
._api.js 212B
._promise.js 212B
._page-events.js 212B
._service.js 212B
._overwrite.js 212B
._index.js 212B
._cookie.js 212B
._dateFormat.js 212B
._index.js 212B
._demo.js 212B
app.json 1KB
._index.json 212B
._index.json 212B
._index.json 212B
._index.json 212B
._app.json 212B
._index.json 212B
._index.json 212B
._index.json 212B
index.json 51B
index.json 48B
index.json 48B
index.json 48B
index.json 48B
index.json 46B
index.json 45B
README.MD 10KB
README.md 3KB
._README.MD 212B
home_icon2_on.png 1KB
home_icon2.png 983B
home_icon1.png 308B
home_icon1_on.png 308B
._home_icon1_on.png 212B
._home_icon1.png 212B
._home_icon2_on.png 212B
._home_icon2.png 212B
index.wxml 2KB
index.wxml 1KB
base.wxml 1KB
index.wxml 771B
index.wxml 688B
index.wxml 539B
index.wxml 408B
index.wxml 362B
index.wxml 309B
._index.wxml 212B
._index.wxml 212B
._index.wxml 212B
._index.wxml 212B
._index.wxml 212B
._index.wxml 212B
._index.wxml 212B
共 120 条
- 1
- 2
资源评论
大雄是个程序员
- 粉丝: 2788
- 资源: 571
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功