从零开始学微信小程序开发：1

1.1、安装

1.2、创建项目

    登录开发工具：

    添加项目：有本地小程序项目和公众号网页开发

          无AppID的开发者也可以使用开发工具

     主要文件：如果创建时选中“quick start项目”，一共有2个目录和3个文件，最关键也是必不可少的，是app.js, app.json和app.wxss

          .js是脚本文件，.json是配置文件，wxss是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

 1.3 认识开发工具

      模拟器：

      调试工具：

             Console：显示错误信息，可用console.log('onLoad')调试

             Sources面板：显示当前项目的脚本文件，与浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以Sources中的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。

             Network面板：用于观察和显示网络请求request和socket的情况。

             AppData面板：用于显示当前项目中的具体数据，实时地反馈项目数据情况。变量

             Storage面板：显示当前项目使用本地存储的情况

             Wxml面板：帮助开发者查看Wxml转化后的界面。

      代码编辑：

1.4 查看小程序效果

      “清除数据缓存”，再重启

    

第二章  微信小程序架构分析

2.1 微信小程序框架结构

     小程序只是前端程序（提供前端的逻辑层、视图层），通常还需要有数据层、业务逻辑层、服务层、控制层等这些通常说的后端程序

        utils目录的util.js是一个共用js库，包含一个日期格式转换的函数。一般只保存一些静态图片，音视频放在后端

2.2 配置文件详解

    app.json：对当前项目进行全局配置，包括每个页面文件的路径、窗口表现、设置网络超时时间、多tab等

    要用到的页面都必须在app.json中进行配置，添加到pages数组中，文件名不需要写后缀，框架会自动寻找.json, .js, .wxml, wxss文件进行编译组合，第一项表示初始页面

    配置窗口状态：

        backgroundColor：窗口的背景色，使用十六进制的RGB

        backgroundTextStyle：下拉背景字体、loading图的样式，目前只支持设置为"dark" or "light

        enablePullDownRefresh：是否开启下拉刷新

        navigationBarBackgroundColor：导航栏背景颜色

        navigatonBarTextStyle：导航标题颜色，目前只支持black and white

        navigationBarTitleText：导航栏标题文字内容

    配置窗口底部tabBar：P42

        在app.json中添加tabBar的5个属性

    debug模式：

        "debug": true

    页面配置文件：不同页面有时需要不同配置，只能设置window属性，无须写window这个键

2.3 逻辑层js文件

    对后端接收到的数据进行加工处理。官方在JavaScript的基础上进行了一些封装和修改：

• 提供了App和Page方法，用来进行程序和页面的注册
• 提供丰富的API，如扫一扫、支付
• 每个页面有独立的作用域，并提供模块化能力
• JavaScript在Web中的一些能力无法使用，如不能访问document和window等对象
• 所有代码最终被打包成一份JavaScript，并在小程序启动的时候运行，直到销毁。类似ServiceWorker

     注册小程序：每个小程序必须在app.js中进行注册且只能注册一次，用App()函数，参数为json对象，可定义以下3个生命周期

• onLaunch：初始化完成时触发
• onShow：启动，或从后台进入前台
• onHide：从前台进入后台

            进入后台一定时间，或手机资源占用过高，就会被销毁

      注册页面：每个页面也必须使用Page()函数注册。使用到的数据在data属性中定义

             初始化数据：位于data中，第一词渲染，data将会以JSON的形式有逻辑层传至视图层。视图层通过wxml对数据进行绑定。

             生命周期函数： P48

• onLoad：页面加载完调用，只调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的query。
• onShow：页面显示时，每次打开页面都会调用一次
• onReady：初始渲染完成是，代表页面已经准备妥当，可以和视图层进行交互
• onHide：页面隐藏（当navigateTo或底部tab切换时）
• onUnload：页面卸载（当redirectTo或navigateBack的）
• onPullDownRefresh：下拉刷新时。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

      事件处理函数：Page中可以定义一些特殊的函数。在视图层的组件中加入事件绑定。

      使用setData修改初始化数据：

2.4 页面描述文件wxml

      组件（Component）是视图的基本组成单元。   

      数据绑定： {{motto}} 用双括号

      条件渲染：根据绑定表达式的逻辑值来判断是否渲染当前组件

               

             或者使用wx:if  T

             当需要控制多个组件时

                     

                        1

                        2

                   

      列表渲染：循环渲染的控制属性

               使用wx:for

                                # items是一个数组

                         {{index}}: {{item.message}}     # index是下标，item是数组当前项的具体内容

                   

       使用模板：组件的组合要多次使用

     

           name: {{item.name}}        # item是传入的对象

           name: {{item.name}}