微信小程序开发快速入门

        最近整理文件，找到一个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 () {
    },
    //页面相关事件处理函数--监听用户