阅读 570

微信小程序模板介绍

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…

关注下面的标签,发现更多相似文章
评论