微信小程序开发文档规范：https://shimo.im/docs/EZKacqyM018gmopv
1. 设置公共文件
我们需要设置一个公共文件，存放我们的域名等公共文件。如下所示：
const config = {
api_base_url: 'http://bl.7yue.pro/v1/',
appkey: "98HcsgdJ3mx4Ufcm"
}
export { config }
2. 封装http请求
首先我们封装一个回调函数式的版本，如下所示：
import { config } from '../config.js'
const tips = {
1: '抱歉，出现了一个错误',
1005: 'appkey无效',
3000: '期刊不存在'
}
class HTTP {
request(params) {
// url, data, method,
if (!params.method) {
params.method = "GET"
}
wx.request({
url: config.api_base_url + params.url,
method: params.method,
data: params.data,
header: {
'content-type': 'application/json',
'appkey': config.appkey
},
success: (res) => {
let code = res.statusCode.toString()
if (code.startsWith('2')) {
params.success && params.success(res.data)
}
else {
let error_code = res.data.error_code
this._show_error(error_code)
}
},
fail: (err) => {
this._show_error(1)
}
})
}
_show_error(error_code) {
if (!error_code) {
error_code = 1
}
const tip = tips[error_code]
wx.showToast({
title: tip ? tip : tips[1],
icon: 'none',
duration: 2000
})
}
}
export { HTTP }
我们来一个调用的例子：
首先我们需要创建一个model文件，
import {HTTP} from '../utils/http.js'
class BookModel extends HTTP {
constructor() {
super()
}
getDetail(bid, success){
let params = {
url:'book/'+ bid +'/detail',
success:success
}
this.request(params)
}
}
export { BookModel}
然后我们在项目中使用，如下：
import {
BookModel
} from '../../models/book.js'
bookModel.getDetail(bid, (data) => {
this.setData({
book: data
})
})
接下来我们再看promise版的封装
import {config} from '../config.js'
const tips = {
1: '抱歉，出现了一个错误',
1005:'appkey无效',
3000:'期刊不存在'
}
// # 解构
class HTTP{
request({url,data={},method='GET'}){
return new Promise((resolve, reject)=>{
this._request(url,resolve,reject,data, method)
})
}
_request(url,resolve, reject, data={}, method='GET'){
wx.request({
url:config.api_base_url + url,
method:method,
data:data,
header:{
'content-type':'application/json',
'appkey':config.appkey
},
success:(res)=>{
const code = res.statusCode.toString()
if (code.startsWith('2')){
resolve(res.data)
}
else{
reject()
const error_code = res.data.error_code
this._show_error(error_code)
}
},
fail:(err)=>{
reject()
this._show_error(1)
}
})
}
_show_error(error_code){
if(!error_code){
error_code = 1
}
const tip = tips[error_code]
wx.showToast({
title: tip?tip:tips[1],
icon:'none',
duration:2000
})
}
}
export {HTTP}
model文件
import {
HTTP
}
from '../util/http-p.js'
class BookModel extends HTTP {
getDetail(bid) {
return this.request({
url: `book/${bid}/detail`
})
}
}
export {
BookModel
}
具体使用
const detail = bookModel.getDetail(bid)
const comments = bookModel.getComments(bid)
const likeStatus = bookModel.getLikeStatus(bid)
Promise.all([detail, comments, likeStatus])
.then(res => {
this.setData({
book: res[0],
comments: res[1].comments,
likeStatus: res[2].like_status,
likeCount: res[2].fav_nums
})
wx.hideLoading()
})
3. 组件使用
先来看一个简单的组件：
js内容如下：
Component({
properties: {
book:Object
},
data: {
},
methods: {
onTap(event){
const bid = this.properties.book.id
wx.navigateTo({
url:`/pages/book-detail/book-detail?bid=${bid}`
})
}
}
})
json文件配置如下：
{
"component": true,
"usingComponents": {}
}
接下来我们来调用组件，在页面的json文件中引入：
{
"usingComponents": {
"v-book": "/components/book/index"
}
}
然后在wxml中使用
接下来我们看如何进行事件绑定：
Component({
properties: {
classic: {
type: Object,
observer: function(newVal) {
if (newVal) {
var typeText = {
100: "电影",
200: "音乐",
300: "句子"
}[newVal.type]
}
this.setData({
typeText
})
}
}
},
data: {
typeText:''
},
methods: {
onTap:function(event){
this.triggerEvent('tapping',{
cid:this.properties.classic.id,
type:this.properties.classic.type
},{})
}
}
})
引入：
开启插槽：
options: {
multipleSlots: true
}
接受外部样式：
externalClasses:['tag-class'],
页面调用传入样式：
behaviors
const classicBeh = Behavior({
properties: {
img: String,
content: String,
hidden:Boolean
},
attached:function(){
},
data:{
},
methods:{
}
})
export {classicBeh}
注意：
properties和data是一个对象合集，打印出来结果是一样的
observer数据改变时执行，当需要对传过来的数据进行处理时，可以放在此处执行，observer里最好不要写setdata操作，且不要在observer里修改自身，这样会产生无限递归调用
Behavior,共同行为,当子组件与继承的组件出现重复时，子组件会覆盖继承的组件，如果继承了多个组件中有相同属性，则最后一个会覆盖之前的，生命周期函数不会覆盖，会依次执行
4. wxs
如果我们想在页面中调用函数，需要使用wxs，WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
可参考官网：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
我们来做个小demo:
filter.wxs
var format = function(text){
if(!text){
return
}
var reg = getRegExp('\\\\n','g')
return text.replace(reg, '\n ')
}
var limit = function(array, length){
return array.slice(0, length)
}
module.exports = {
format:format,
limit:limit
}
引入：
5. flex
5.1. 当给父元素设置display: flex时，子元素就已经取消块状元素特性了，不需要再给子元素设置inline-block
5.2. flex-direction默认为row(横向排列) row-reverse(盒子倒序排序)
5.3. 不指定宽度，默认为100%，不指定高度，默认为自适应(子元素填充的高度)
5.4. justify-content,主轴对齐方向，默认为flex-start
5.5. align-content: 交叉轴对齐方向;当没有给子元素设置高度时，stretch会将高度拉伸，当有高度时，这个无效;设置baseline,会使子元素文字基线对齐(以第一个子元素文字为基线)
5.6. flex-wrap: no-wrap默认不换行