关于微信小程序的基本规则语法全面总结

app.json的配置(全局)

{
// 用来配置页面的路径
"pages":[
"pages/index/index", // 首页
"pages/Test/Test" // 跳转的页面
],
"window":{
"enablePullDownRefresh": true, // 是否支持下拉刷新
"backgroundTextStyle":"dark", // 下拉刷新的字体颜色，支持light
"backgroundColor": "#e04c4c", // 设置下拉刷新的背景颜色
"navigationBarBackgroundColor": "#fff", // 设置微信程序顶部导航栏颜色
"navigationBarTitleText": "yejiawei", // 顶部导航栏文字
"navigationBarTextStyle":"black" // 顶部导航栏文字样式，black或者white
"onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
},
"tabBar": { // 设置tab切换栏的配置
"list": [
{
"pagePath": "pages/index/index", // 跳转的路径
"text": "首页", // tab的文字
"iconPath": "/images/t1.jpg" // 设置背景图路径
},
{
"pagePath": "pages/Test/Test",
"text": "测试",
"selectedIconPath": "/images/t1.jpg" // 设置选中时图片的路径
}
],
"color": "#e04c4c", // 设置tab按钮字体颜色
"selectedColor": "#000", // 设置按钮选中的颜色
"backgroundColor": "#1aad16", // 设置tab按钮的背景颜色
"borderStyle": "black", // 设置tabbar边框颜色，只支持black/white
"position": "top" // 设置tabbar的位置，设置为top无法显示图片
},
"networkTimeout": {
"request": 10000, // request请求的超时时间
"connectSocket": 10000, // connectSocket的超时时间
"downloadFile": 10000, // 下载文件的超时时间
"uploadFile": 1000 // 上传文件的超时时间
},
"debug": true // 开启debug模式，在控制台输出程序信息
}
page.json的配置(页面)
设置的配置用来覆盖app.json中的window配置
{
"navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色
"navigationBarTextStyle": "black", // 顶部导航栏文字样式，black或者white
"navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字
"backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色
"backgroundTextStyle": "light", // 下拉刷新的字体颜色，支持light
"enablePullDownRefresh": true, // 是否支持下拉刷新
"disableScroll": true, // 是否支持滚动
"onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
}

程序入口函数(App)

Page({
data: {
msg: "haha" // 页面的状态
},
onLoad: function(options) { // 页面加载完毕触发 },
onReady: function() { // 页面渲染完毕触发 },
onShow: function() { // 页面开始渲染触发 },
onHide: function() { // 页面切换到后台触发 },
onUnload: function() { // 页面卸载触发 },
onPullDownRefresh: function() { // 页面下拉刷新触发},
onReachBottom: function() { // 页面上滑触底触发 },
onShareAppMessage: function () {
// 页面点击转发触发，需要return一个object，只有定义了此方法，才会有转发的功能
return {
title: "分享的页面", // 分享页面的标题
path: "/pages/logs/logs" // 分享的页面的路径
}
},
onPageScroll: function(options) { // 页面滚动触发 },
myFn: function() { // 自定义函数
console.log(this.route); // 获取当前页面的路径
this.setData({ // 修改状态
msg: "haha"
}, function() {
// 状态修改完，调用此方法
})
console.log(getCurrentPages()); // 获取当前页面栈实例
}
customData: { // 自定义属性 }
})

页面路由

方法wx.navigateTo(object) 跳转到指定的页面，无法跳转到tabbar页面（当前页保留）

wx.navigateTo({

url: ‘/pages/logs/logs?id=1‘, // 页面路劲，可以传递query参数

success: function() { // 导航成功执行

console.log("跳转成功");

},

fail: function() { // 导航失败执行

console.log("跳转失败");

},

complete: function() { // 导航完成调用

console.log("导航结束");

}

})

方法wx.navigateBack(object) 返回到之前的页面

wx.navigateBack({

delta: 2 // 后退2步

})

方法wx.redirectTo(object) 销毁当前页面，跳转到指定的页面，不能跳转到tabbar页面

使用方法和navigateTo一样

方法wx.reLaunch(object) 销毁所有页面，跳转到任意指定的页面

使用方法和navigateTo一样

方法wx.switchTab(object) 跳转到tabbar页面

使用方法和navigateTo一样

模块化

js文件可以使用exports和module.exports暴露接口

exports是module.exports的一个引用

function fn () {

console.log("导入的方法执行了");

}

exports.fn = fn;

使用文件中的方法

var common = require(‘../common.js‘);

common.fn();

WXML文件细节

状态绑定

变量使用双大括号包裹 <view>{{msg}}</view>

标签的属性使用双引号包裹 <view id="item"></view>

双引号里面的内容wx都会将其转化成字符串，所以true,false要表达本意需要再包裹双大括号

绑定对象，不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>

列表遍历

<view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">

{{index}}: {{item}}

</view>

给index和item取别名

<view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">

{{myIndex}}: {{myItem}}

</view>

渲染多节点代码块

<block wx:for="{{[1, 2, 3]}}">

<view> {{index}}: </view>

<view> {{item}} </view>

</block>

遍历字符串

<view wx:for="array">

{{item}}

</view>

绑定key，当组件重排后根据id可以复用组件和组件的状态

<block wx:for="{{[1, 2, 3]}}" wx:key="this"> // 当item是字符串或者数字可以使用this代表item作为key

<view> {{index}}: </view>

<view> {{item}} </view>

</block>

条件渲染

<view wx:if="{{false}}">haha</view>

<view wx:elif="{{true}}">haha1</view>

<view wx:else="{{false}}">haha2</view>

同样也可以使用block来控制多节点代码块

模板

声明一个模板

<template name="mytemplate">

<view>

{{a}}: {{b}}

</view>

</template>

使用此模板 obj: { a: 1, b: 2 }

<template is="mytemplate" data="{{...obj}}"></template>

事件

使用bindtap绑定事件 <view bindtap="fn" data-my-data="222"></view>

事件对象

myFn: function(event) {

console.log(event);

// 使用data开头的自定义属性，将保存再event.currentTarget.dataset中

}

事件分类

冒泡事件

touchstart 开始触摸

touchmove 触摸移动

touchcancel 触摸打断

touchend 触摸离开

tap 瞬间触摸

longpress 超过350ms的触摸

transitionend 过渡结束

animationstart 动画开始

animationiteration 动画执行一遍后触发

animationend 动画结束触发

非冒泡事件，除了上述事件以外都是非冒泡事件

绑定事件

可以使用bind和catch绑定

bindtap或者bind:tap 不阻止冒泡

catchtap或者catch:tap 阻止冒泡

在WXML文件中导入其他WXML文件

可以将上面讲的template代码，放到一个单独的wxml文件中，然后在当前文件中使用 <import src="../common.wxml" /> 导入，就可以立即使用了

而<include src="../common.wxml" />的作用，是将除了template和wxs以外的代码，都拷贝到include所在的位置

wxs的使用（代码可以单独写在wxs文件中，也可以写在wxs标签中）

模块

wxs的作用其实和js文件的作用是一样的，只不过提供了另外一种方式来写js

外界要访问wxs中定义的代码需要使用module.exports导出

创建一个wxs文件，定义如下代码

var message = "你好吗？";

module.exports.message = message;

在wxml文件中使用

首先使用wxs标签导入 <wxs src="../common.wxs" module="wxsData"/>

使用 <view class="demo">{{wxsData.message}}</view>

在其他wxs文件中使用

var wxsData = require("../common.wxs");

WXSS文件

尺寸单位使用rpx，一个rpx就代表一个物理像素

导入其他WXSS文件 @import "../common.wxss";

自定义组件（和vue里面的组件类似）

创建自定义组件的步骤

第一步，修改json

修改json文件为 { "component": true }

第二部，WXML文件书写

<view class="demo"> {{text}} </view>

<slot></slot>

slot就是插槽，和vue的一样

第三步，WXSS中书写

.demo{ color: red; }

只能使用类选择器

第四部，js文件中写

Component({

properties: {

// 组件的属性，可以指定类型和默认值，和vue的props验证很像

text: {

type: String,

value: ‘默认值‘,

}

},

data: {

// 组件的状态

someData: {}

},

methods: {

// 组件的自定义方法

customMethod: function () { }

}

})

第五步，使用组件

在要使用此自定义组件的page中，修改他的json，插入如下字段

"usingComponents": {

"my-component": "../myComponent/myComponent"

}

在page组件中使用 <my-component></my-component> 即可

同时可以使用 <my-component text="我是传递的属性"></my-component> 传递属性值给组件内部

WXML文件的细节

写法和一般的WXML文件写法一致，不过多了slot

没有名字的slot只能有一个，如果要使用多个slot，需要操作如下几步

第一步，在js中的Component函数中，添加如下

options: {

multipleSlots: true

},

第二步，在WXML中写多个带名字的slot

<view class="demo"> {{text}} </view>

<slot name="a"></slot>

<slot name="b"></slot>

第三步，在页面中使用

<my-component text="我是传递的属性">

<view slot="a">我是a</view>

<view slot="b">我是b</view>

</my-component>

WXSS文件的细节

只能使用类选择器

可以继承组件外的样式

app.wxss文件中定义的样式，对组件无效

另外可以使用:host来定义组件标签的样式

:host{ color: black; }

js文件的细节

Component函数的使用如下

Component({

properties: { // 设置组件接受的属性

myProperty1: { // 属性名

type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

value: ‘‘, // 属性初始值（可选），如果未指定则会根据类型选择一个

observer: function(newVal, oldVal){ // 监听属性值改变的函数 }

},

myProperty2: String // 简化的定义方式

},

data: {}, // 组件状态

methods: { // 设置方法

onMyButtonTap: function(){

console.log(this.id); // 组件标签的id

console.log(this.dataset); // 组件的data自定义属性集合

console.log(this.data); // 组件的属性和状态的集合

console.log(this.hasBehavior()) // 组件是否有behavior属性

this.setData({}) // 属性和状态都可以设置

/*

可以手动触发组件的自定义事件，比如，组件上绑定了一个自定义事件

<my-component bindmyEvent="myFn"></my-component>

要手动触发myEvent，需要调用

this.triggerEvent(‘myEvent‘, {

// 事件参数

}, {

bubbles: true, // 是否冒泡

composed: true, // 到父组件内部寻找同名事件

capturePhase: true // 是否捕获

}

);

/

}

},

created: function(){}, // 组件在内存中创建完毕执行

attached: function(){}, // 组件挂载之前执行

ready: function() {}, // 组件挂载后执行

detached: function(){}, // 组件移除执行

moved: function(){}, // 组件移动的时候执行

relations: {

/

嵌套的组件需要相互关联就要使用此字段

相同嵌套子节点的处理方式

假设嵌套的html结构如下

<custom-ul>

<custom-li> item 1 </custom-li>

<custom-li> item 2 </custom-li>

</custom-ul>

则custom-li组件中需要定义如下的relations

‘./custom-ul‘: { // 嵌套父组件的路径

type: ‘parent‘, // 关联的目标节点应为父节点

linked: function(target) { }, // custom-li插入到custom-ul时执行，target是custom-ul

linkChanged: function(target) { }, // custom-li被移动后执行，target是custom-ul

unlinked: function(target) { } // custom-li被移除时执行，target是custom-ul

}

在custom-ul组件中也要定义此字段，只不过反过来 type 改成 child

不同嵌套子节点的处理方式

<custom-div>

<custom-span> item 1 </custom-span>

<custom-div> item 2 </custom-div>

</custom-div>

此时就要使用behavior作为公共的节点路径了，假设custom-span和custom-div都有一个名为customFormControls的behavior

custom-span和custom-div内部定义relations的方式和之前一样，只不过将type改成ancestor

custom-div中定义

‘customFormControls‘: {

type: ‘descendant‘, // 关联的目标节点应为子孙节点

target: customFormControls

}

/

},

behaviors: [

/

behaviors的作用就是用来创建一个公用的组件js，内部代码和Component一模一样

Behavior({ //... })

主要用来和当前的Component代码合并，同名的属性以当前组件的为主

*/

]

})

按需加载

实现按需加载的步骤如下

主包中应只包含tabbar

第一步，在项目根目录下创建分包的文件夹，将分包的page写在里面

第二步，在app.json中添加如下配置

"subPackages": [

{

"root": "package1", // 分包文件夹根路径

"pages": [ // 分包中包含的路径，不能添加到app.json的page中

"pages/Demo/Demo"

]

}

]

在tabbar配置项中，不能应用分包的页面

第三步，使用分包文件

在tabbar的页面中，引用分包页

wx.navigateTo({

url: ‘../../package1/pages/Demo/Demo‘

})

下面是我最近的劳动成果大家可以体验一下