最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的。
如果你熟悉JavaScript,那你基本上看完这个文档马上就可以编写微信小程序,小程序分为逻辑层和视图层,逻辑层由javascript脚本控制,视图层由小程序标签控制。虽然小程序最终被编译为了html+js的代码,但是,小程序不允许直接使用任何html标签,禁止了一切dom操作,像eval,alert,confirm等语句也被禁止了,因此,之前大家熟悉的jquery之类的dom操作类都会失效。小程序在取消dom操作的同时,给我们提供了一种新的视图改变方式,“数据绑定”(基本和vue差不多),所以,开发小程序时一定转化思想,从“dom操作思想”转化为“数据绑定”。下面我将分别从“开发环境搭建”,“框架”,“组件”,“API”等几个方面进行介绍。
1,开始前准备(环境搭建)
环境搭建步骤比较简单,大家只要下载微信web开发工具即可,详细步骤参见:
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
此处不再赘述。
2,框架(重点)
框架结构(下面是一个示例,红色部分为必须创建的文件)
根目录
├Pages //自定义的存放所有页面的目录
├Home //自定义的页面目录
├index.js //自定义的页面逻辑层
├index.wxml //自定义的页面视图层
├index.wxss //自定义的页面样式
├Static //自定义的静态文件目录
├images //自定义的静态图片目录
├js //自定义的js目录
common.js //自定义的js文件
app.js //程序入口
app.json //全局配置
app.wxss //全局样式
可以看出,小程序是一个目录结构灵活的框架。小程序是由多个js文件,wxml文件,wxss文件,json文件构成的。
app.js
app.js是程序路口,必须创建,且app.js一定要调用“App()”方法注册程序,下面是一段示例代码
App({
//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onLaunch: function () {
},
//当小程序启动,或从后台进入前台显示,会触发 onShow
onShow: function (options) {
},
//当小程序从前台进入后台,会触发 onHide
onHide: function () {
},
//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
onError: function (msg) {
}
})
app.json
app.json是程序的全局配置,里面是一个json对象
下面是一个demo
{
"pages": [//程序包含的所有页面,不在这里注册无法访问,注册的页面文件一定要存在,否则会报错
"Pages/Home/index",
"Pages/News/newsList",
"Pages/News/newsDetail",
"Pages/Contact/index"
],
"window": {//窗口配置
"navigationBarBackgroundColor": "#000",//导航栏背景颜色
"navigationBarTextStyle": "#fff",//导航栏标题颜色
"navigationBarTitleText": "XX信息技术",//导航栏标题文字内容
"backgroundColor": "#eeeeee",//窗口的背景色
"backgroundTextStyle": "light",//loading 图的样式,仅支持 dark/light
"enablePullDownRefresh": false //是否允许下拉刷新
},
"tabBar": {//tabBar最少两个,最多五个
"list": [
{
"pagePath": "Pages/Home/index",//页面路径
"text": "首页",//标题
"iconPath": "Static/images/home.png",//图标路径
"selectedIconPath": "Static/images/home_act.png"//选中状态图标路径
},
{
"pagePath": "Pages/News/newsList",
"text": "新闻",
"iconPath": "Static/images/news.png",
"selectedIconPath": "Static/images/news_act.png"
},
{
"pagePath": "Pages/Contact/index",
"text": "联系",
"iconPath": "Static/images/contact.png",
"selectedIconPath": "Static/images/contact_act.png"
}
]
}
}
除了程序路口文件和全局配置文件之外,小程序对目录结构并没有严格限制。
页面
├Pages //自定义的存放所有页面的目录
├Home //自定义的页面目录
├index.js //自定义的页面逻辑层
├index.wxml //自定义的页面视图层
├index.wxss //自定义的页面样式
您可以把一个模块放到一个目录,如主页放到Home目录,新闻放到News,一个目录可以包含多个页面,每个页面至少包含一个js文件和一个wxml文件,此外还可以配置一个wxss文件和一个json文件,同一个页面的js,wxml等文件名要相同,例如news.js要对应news.wxml。
js文件详解
每个页面的js文件控制该页面的逻辑操作,必须包含一个“Page()”方法注册页面
下面是一个demo
Page({
//页面的初始数据
data: {
},
//生命周期函数--监听页面加载
onLoad: function (options) {
},
//生命周期函数--监听页面初次渲染完成
onReady: function () {
},
//生命周期函数--监听页面显示
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
//生命周期函数--监听页面卸载
onUnload: function () {
},
//页面相关事件处理函数--监听用户