文章来源:www.bookcss.com/note/12/19
github地址:github.com/hwgq2005/xc…
一、目录结构
├── components
| ├── select-address
├── images
├── pages
| ├── page1
| └── page2
├── utils
| ├── common.js
| ├── host.js
| ├── reg.js
| ├── request.js
| └── sign.js
├── wxml
| ├── aaa.wxml
| └── bbb.wxml
├── wxss
| ├── common.wxss
| ├── header.wxss
| └── sidebar.wxss
└── wxParse
复制代码
1.components
主要存放组件模块,可自行添加。 组件需要在页面里的 xxx.json
文件下配置组件路径,如下:
{
"navigationBarTitleText": "标题",
"usingComponents":{
"select-address":"../../components/select-address/select-address"
}
}
复制代码
2.utils
封装了公共的模板,可以看到以下这些文件:
- request.js - 请求封装
- sign.js - 请求签名参数
- host.js - 域名环境控制
- reg.js - 正则匹配验证
- common.js - 公共方法
3.wxParse
主要是用来解析HTML。
import WxParse from '../../wxParse/wxParse'
WxParse.wxParse('名称定义', 'html', data.data.rules, this, 5);
复制代码
WxParse.wxParse(bindName , type, data, target,imagePadding)
- bindName绑定的数据名(必填)
- type可以为html或者md(必填)
- data为传入的具体数据(必填)
- target为Page对象,一般为this(必填)
- imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
引入模板
<import src="../../wxParse/wxParse.wxml"/>
<!--bindName-->
<template is="wxParse" data="{{wxParseData:名称定义.nodes}}"/>
复制代码
二、请求调用
1.通用方式
import $ from '../../utils/request'
$.ajax({
url: _.host.baseApi + '/api/xxx',
method: 'post',
data: {}
}).then(function(data){
do somethig ...
})
复制代码
2.GET请求
import $ from '../../utils/request'
$.get(_.host.baseApi + '/api/xxx',data: {}).then(function(data){
do somethig ...
})
复制代码
3.POST请求
import $ from '../../utils/request'
$.post(_.host.baseApi + '/api/xxx',data: {}).then(function(data){
do somethig ...
})
复制代码
4.参数说明
字段 | 字段说明 |
---|---|
method | get或post,默认值为get |
data | isSign等于true或false,默认值为false,可根据情况删减。 |
三、域名环境控制
考虑到一个项目不同模块不同域名的情况下:
// 是否开发环境
let isDev = false;
// 开发环境域名
let dev = {
// 商城API
baseApi : 'xxx1.com',
// 抽奖api
drawApi : 'xxx2.com'
}
// 线上环境域名
let pro = {
// 商城API
baseApi : 'xxx3.com',
// 抽奖api
drawApi : 'xxx4.com'
}
export default isDev ? dev : pro
复制代码
四、结尾
以上只提供目录模板及公共方法,其他需自行开发。 微信小程序开发文档:developers.weixin.qq.com/miniprogram…