微信小程序模板介紹

文章來源：www.bookcss.com/note/12/19

github地址：github.com/hwgq2005/xc…

1、目錄結構

├── 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}}"/>
複製代碼

2、請求調用

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，可根據狀況刪減。

3、域名環境控制

考慮到一個項目不一樣模塊不一樣域名的狀況下：

// 是否開發環境
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
複製代碼

4、結尾

以上只提供目錄模板及公共方法，其餘需自行開發。 微信小程序開發文檔：developers.weixin.qq.com/miniprogram…