微信小程序模板介绍

文章来源：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…