微信小程序总结

微信小程序总结

转载：https://www.jianshu.com/p/4a618a441d1c?from=singlemessage

一.配置文件

1.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模式，在控制台输出程序信息
}

2.page.json的配置(页面)

设置的配置用来覆盖app.json中的window配置

{
	"navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色
	"navigationBarTextStyle": "black", // 顶部导航栏文字样式，black或者white
	"navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字
	"backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色
	"backgroundTextStyle": "light", // 下拉刷新的字体颜色，支持light
	"enablePullDownRefresh": true, // 是否支持下拉刷新
	"disableScroll": true, // 是否支持滚动
	"onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
}

3.程序入口函数(App)

App({
	onLaunch: function (options) {
	// 程序加载调用
	},
	onShow: function (options) {
	// 从后台进入前台调用，默认程序第一次加载回调用
	},
	onHide: function () {
	// 从前台切换到后台调用
	},
	onError: function (msg) {
	// 程序报错调用
	},
	myFunc: function() {
	// 自定义函数
	},
	globalData: {
		// 全局自定义数据
		userInfo: "yejiawei"
	}
})

上面的onLaunch和onShow方法都有options参数，options参数里面有如下属性

{
	path: "pages/index/index" // 程序打开的路径
	query: {}, // 当调用wx.navigateTo可以传递query
	scene: 1001, // 打开小程序的场景值
	referrerInfo: { // 从其他程序中进入到此程序，会返回此字段
	appId: ..., // 其他程序的appId
	extraData: ... // 其他程序传递过来的数据
}
}

可以使用 var app = getApp(); 来获取小程序实例，console.log(app.globalData.userInfo)

4.页面的入口函数(Page)

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: { // 自定义属性 }
})

5.页面路由

1）方法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("导航结束");
	}
})

2）方法wx.navigateBack(object) 返回到之前的页面。可以携带参数

wx.navigateBack({
	delta: 2 // 后退2步
})

3）方法wx.redirectTo(object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
这个跳转方式,不可以跳转回之前的页面. 因为在使用这种方式进行页面跳转的时候,小程序会触发生命周期 onUnload 指的是页面卸载,所以是不可以返回的.可以携带参数

4）方法wx.switchTab(object) 能够跳转到tabBar页面，并关闭其他所有非 tabBar 页面。这种方法不能够携带参数

5）方法wx.reLaunch(object) 关闭所有页面，打开到应用内的某个页面
这种跳转方式既可以跳转普通页面,也可以跳转至tabBar页面,但是跳转之前会关闭所有打开的页面. 可以携带参数

6.模块化

js文件可以使用exports和module.exports暴露接口
exports是module.exports的一个引用

function fn () {
	console.log("导入的方法执行了");
}
exports.fn = fn;

使用文件中的方法

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

二.WXML文件细节

1.状态绑定

变量使用双大括号包裹 {{msg}}
标签的属性使用双引号包裹
双引号里面的内容wx都会将其转化成字符串，所以true,false要表达本意需要再包裹双大括号
绑定对象，不需要对象的花括号

2.列表遍历

<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>

3.条件渲染

<view wx:if="{{false}}">haha</view>
<view wx:elif="{{true}}">haha1</view>
<view wx:else="{{false}}">haha2</view>

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

4.模板

声明一个模板

<template name="mytemplate">
<view>
{{a}}: {{b}}
</view>
</template>

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

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

5.事件

1)使用bindtap绑定事件

<view bindtap="fn" data-my-data="222"></view>

2)事件对象

myFn: function(event) {
	console.log(event);
	// 使用data开头的自定义属性，将保存再event.currentTarget.dataset中
}

示例：
在.wxml文件绑定:

<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>

在后台.js文件中定义tapMessage函数:

//index.js
Page({
  data: {
    mo: 'Hello World!!',
    userid : '1234',
  },
  
   // 定义函数
  tapMessage: function(event) {
    console.log(event.target.id);       // 可获得
   
    // 要获得其它属性, 需要从dataset(数据集)中获取，userxxx为自定义的属性名, 但命名方式为:data-userxxx
    console.log(event.target.dataset.userXxx);
  }
})

注意一点:

<!-- data-userXxx,这个大写的X要改为-x -->
<text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>

自定义数据(data-)中的大写改为 短横线+其小写
取数据时, 去掉data和那些短横线并还原大写 (data-user-xxx --> userXxx)

阻止事件冒泡行为: 将bindtap改为catchtap就行了, 只会触发自身的点击事件。

3)事件分类
3-1）冒泡事件
touchstart 开始触摸
touchmove 触摸移动
touchcancel 触摸打断
touchend 触摸离开
tap 瞬间触摸
longpress 超过350ms的触摸
transitionend 过渡结束
animationstart 动画开始
animationiteration 动画执行一遍后触发
animationend 动画结束触发

3-2）非冒泡事件，除了上述事件以外都是非冒泡事件

4）绑定事件
可以使用bind和catch绑定
bindtap或者bind:tap 不阻止冒泡
catchtap或者catch:tap 阻止冒泡
在WXML文件中导入其他WXML文件

可以将上面讲的template代码，放到一个单独的wxml文件中，然后在当前文件中使用 导入，就可以立即使用了
而的作用，是将除了template和wxs以外的代码，都拷贝到include所在的位置
wxs的使用（代码可以单独写在wxs文件中，也可以写在wxs标签中）

6.模块

wxs的作用其实和js文件的作用是一样的，只不过提供了另外一种方式来写js
外界要访问wxs中定义的代码需要使用module.exports导出
创建一个wxs文件，定义如下代码
var message = “你好吗？”;
module.exports.message = message;
在wxml文件中使用
首先使用wxs标签导入
使用 {{wxsData.message}}
在其他wxs文件中使用
var wxsData = require("…/common.wxs");

三.WXSS文件

1.单位

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

2.导入

导入其他WXSS文件 @import “…/common.wxss”;

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

创建自定义组件的步骤

第一步，修改json

修改json文件为 { “component”: true }

第二步，WXML文件书写

{{text}}

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组件中使用 即可
同时可以使用 传递属性值给组件内部

四.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>