小程序开发简易教程：

1. 获取AppID         
2. https://mp.weixin.qq.com  – 设置 – 开发者设置中       
3. 下载开发者工具          
4. 创建项目
   
   • app.js 小程序的脚本代码，监听处理小程序的生命周期函数、申明全局变量、调用框架提供的API等等
     
     1. App();函数注册一个小程序  
     2. onLaunch();程序初始化完成时触发，全局指触发一次    
     3. onShow(options);启动或从后台进入前台显示时触发     
     4. onHide();从前台进入后台会触发      
     5. onError(msg);脚本错误或API调用失败会触发，并带上错误信息
     6. getUserInfo(){};获取用户信息，需要先调用wx.login();
        
        • wx.login({});调用微信登录接口，获取登录凭证(code)，进而获取用户登录信息，包括用户的唯一标识(openid)，及本次登录的会话密钥(session_key)。用户数据的加解密通讯需要密钥来完成。
   • app.json 搜对整个小程序的全局配置：配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。
     
     1. ”pages”: [],配置页面路由   
     2. “window”:{}设置默认页面的窗口表现   
   • app.wxss 是整个小程序的公共样式表我们可以在页面组件的class上直接使用app.wxss中申明的样式规则   
   • 创建页面
     
     1. *.js 文件 ：脚本文件 — 在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
     2. *.json 文件 ：配置文件 —   页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
     3. *.wxss 文件 ：页面样式文件    
     4. *.wxml 文件 ：页面结构文件        

框架

1. 框架的页面管理
   框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进 框架 中，其他的一切复杂的操作都交由 框架 处理。
2. 框架的基础组件  
   框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。
3. 丰富的 API
   框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。          

文件结构

1. 配置：  
   
   • app.json
     
     1. ”pages”: []    设置页面路径  
     2. “window”: {     //设置默认窗口的表现(颜色都是十六进制的)
        “navigationBarBackgroundColor”: #000,   //导航栏背景颜色
        “navigationBarTextStyle”: white/black,   //导航栏标题颜色，仅支持black/white
        “navigationBarTitleText”: string,        //导航栏标题  
        “backgroundColor”: #fff,      //窗口的背景颜色
        “backgroundTextStyle”: dark,    //下拉背景字体、loading 图的样式，仅支持 dark/light
        “enablePullDownRefresh”: boolean //是否开启下拉刷新,详见页面相关事件处理函数。
        }
     3. “tabBar”: {     //设置底部的tab
        “color”: #ddd,      //tab上文字的默认颜色
        “selectedColor”: #333,       //选中tab时的颜色  
        “backgroundColor” #ccc,      //tab背景颜色
        “borderStyle”: black/white,  //tabBar上边框的颜色，仅支持black/white
        “list”: [     //tab 的列表
           {
               “pagePath”: ‘../..’,     //pages中定义的页面路径
               “text”: string,    //tab上的按钮文字
               “iconPath”: ‘../..’,    //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
               “selectedIconPath”: ‘../..’     //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
           }
        ],
        “position”: top/bottom      //
        }
     4. “networkTime”: {       //网络超时时间
        “request”: 10 000,   //wx.request 的请求超时时间，默认60 000(下面都是)  
        “connectSocket”: 10 000,    //wx.connectSocket的超时时间
        “uploadFile”: 10 000,  //wx.uploadFile的超时时间
        “downloadFile”: 10 000,  //wx.downloadFile的超时时间
        }
     5. “debug”: boolean     是否开启debug模式     
   • page.json :页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键
   • 属性如下：
     {
        “navigationBarBackgroundColor”: #000,
        “navigationBarTextStyle”: black/white,
        “navigationBarTitleText”: string,
        “backgroundColor”: #ddd,
        “backgroundTextStyle”: dark/light,
        “enablePullDownRefresh”: boolean,
        “disableScroll”: boolean        //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项(默认 false )
     }

逻辑层

注册程序：App(options);

 

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。  

```    options = {        onLaunch: function(){},     //生命周期函数--监听小程序初始化(只会触发一次)          onShow: function(){},       //生命周期函数--监听小程序显示(每次显示小程序都会触发)          onHide: function(){},       //生命周期函数--监听小程序隐藏(每次小程序从前台进入后台都会触发)          onError: function(msg){},      //当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息            userFun:function(){}        //用户自定义函数       }```

 

问题：  
 1. onLaunch 和 onShow 的参数
     + path: string 打开小程序的路径
     + query： {} 打开小程序的query
     + scene: number 打开小程序的场景值
     + shareTicket: string   ???
 1. getApp()函数：获取小程序实例
     + console.log(getApp().globalData);
     + App()必须在app.js中注册，并且不能注册多个
     + 不要再App()内部使用getApp(),用this即可
     + 不要再onLaunch时调用getCurrentPage(),此时page还没有生成
     + 通过getApp()获取实例后，不要随意调用生命周期函数  ？？？？？？

注册页面

 

Page(options) 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

```    options = {        data: {},   // 页面的初始数据          onLoad: function(){},        onReady: function(){},      //生命周期函数--监听页面初次渲染完成            onShow: function(){},        onHide: function(){},        onUnload: function(){},     //生命周期函数--监听页面卸载  当redirectTo或navigateBack的时候调用。          onPullDownRefresh: function(){},        //页面相关事件处理函数--监听用户下拉动作          onReachButton： function(){},        //页面上拉触底事件的处理函数         onShareAppMessage: function(){},    //用户点击右上角转发         route: string,      //当前页面的路径           userFun:function(){}    } ```

 

更改data中的数据需要用到this.setData(key: value);方法，否则不会生效

页面路由

• 页面栈：
  
  1. 页面栈以栈（先进后出）的形式维护页面与页面之间的关系；
  2. 小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面。
  3. 使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止；  
  4. 使用wx.navigateTo重复打开界面,页面栈大小加1,直到页面栈大小为5为止；   
  5. 使用wx.redirectTo重定向,当前页面被替换，页面栈不变，如果新页面之前打开过，则得到的是两个状态独立的同一页面     
  6. 使用wx.navigateBack返回，当delta为1，等同于左上返回按钮，页面栈减一；当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；以此类推，直到栈底为止，也就是首页。

• 哪些情况会触发页面跳转   

  1. 小程序启动，初始化第一个页面   

  2. 打开新页面，调用 API wx.navigateTo 或使用组件    

         wx.navigateTo({        //目的页面地址，原页面保留        url: 'pages/logs/index',        success: function(res){},        ...    })

  3. 页面重定向，调用 API wx.redirectTo 或使用组件    

         wx.redirectTo({        //目的页面地址，原页面被关闭，不可返回        url: 'pages/logs/index',        success: function(res){},        ...    })

         navigator url="pages/logs/index" hover-class="navigator-hover"跳转/navigator    // 当该组件添加redirect属性时，等同于wx.redirectTo接口；默认redirect属性为false，等同于wx.navigateTo接口。

  4. 页面返回，调用 API wx.navigateBack或用户按左上角返回按钮   

         wx.navigateBack({        delta: 1    })    // delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁。

  5. tarbar切换     页面全部出栈，只留下新的 Tab 页面     

  6. 重加载  页面全部出栈，只留下新的 Tab 页面     

• 如何正确使用页面跳转: 官方规定小程序最多只能有五个页面同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5。    

  1. 对于可逆操作，使用wx.navigateTo,比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页    
  2. 对于不可逆操作，使用wx.redirectTo,比如用户登录成功后，关闭登录页面，不能返回到登录界面。  
  3. 对于一些介绍性等不常用页面wx.redirectTo或wx.navigatrBack   
  4. 对于类似九宫格、列表项，使用   
  5. 不要在首页使用wx.redirectTo，这样会导致应用无法返回首页   
  6. 简化需求、简化流程；核心功能在两三个页面完成便是张小龙追求『小而美』的体现    
• getCurrentPages()： 用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。    
• 注意：  
  
  1. navigateTo, redirectTo 只能打开非 tabBar 页面。
  2. switchTab 只能打开 tabBar 页面。
  3. reLaunch 可以打开任意页面。
  4. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  5. 调用页面路由带的参数可以在目标页面的onLoad中获取。

模块化

• 文件作用域

  1. 在js文件中申明的函数只在该文件中有效，
  2. 通过全局的getApp()函数可以获得全局的应用实例：  

      //app.js    App({        globalData: 1    })    // index.js    var app = getApp();    app.globalData ++;    // logs.js    console.log(getApp().globalData);   // 2

• 模块化

  1. 我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports(不推荐使用) 才能对外暴露接口。     
  2. 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。  
  3. ​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入  

      // common.js    function sayHello(name){        console.log(`hello ${name} !`)    }    function sayBye(name){        console.log(`Goodbye ${name} !`)    }    module.exports.sayHello = sayHello;    exports.sayBye = sayBye;    // index.js中调用      var comm = require(../common.js);    Page({        helloJack:function(){            comm.sayHello("Jack");        },        goodByeRose: function(){            comm.sayBye("Rose");        }    })

视图层

 

视图层有wxml何wxss组成
 将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

wxml :WXML（WeiXin Markup Language）是框架设计的一套标签语言

1. 数据绑定

   • 动态数据来源： Page({})的data:{}      
   • 绑定目标： Mustache 语法 {{  }}  
   • 作用对象： 标签内容view {{ logs }} /view; 组件属性： block wx:for-item="{{ logs }}"/view        
   • Mustache 语法在微信小程序中的另一个用途： 用在关键字上： checkbox checked="{{ false }}" /checkbox,注意此处去掉大括号会编译为字符串，达不到目的
   • 运算： 可以在{{}}中进行简易的运算，参考vue的数据绑定
     

         // 三目运算    view hidden="{{flag ? true : false}}" Hidden /view    // 算术运算    view {{a + b}} + {{c}} + d /view    Page({    data: {        a: 1,        b: 2,        c: 3    }    })    // 逻辑判断    view wx:if="{{length  5}}" /view    // 字符串运算    view{{"hello" + name}}/view    Page({    data:{        name: 'MINA'    }    })    // 组合运算    template is="objectCombine" data="{{for: a, bar: b}}"/template    Page({    data: {        a: 1,        b: 2    }    })    // 最终组合成的对象是 {for: 1, bar: 2}    ......

2. 列表渲染

   • wx.for=”{{ arr }}”, 默认送了两个参数： {{ index }} 和 {{ item }} ,  分别为数组元素下标和对应的数组元素       

       view wx:for="{{array}}"        {{index}}: {{item.message}}    /view    Page({    data: {        array: [{        message: 'foo',        }, {        message: 'bar'        }]    }    })

   • 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

       view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"        view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"            view wx:if="{{i = j}}"                {{i}} * {{j}} = {{i * j}}            /view        /view    /view

   • block： wx:for, 渲染一个包含多节点的块：   

       block wx:for="{{[1, 2, 3]}}"        view {{index}}: /view          view {{item}} /view    /block

   • wx:key ??? 取值为 this(指向for循环的item本身，并且item不会变化的)，或者string，为循环中对象的键

3. 条件渲染

   • wx:if=”{{ condition }}”

         view wx:if="{{condition}}" True /view    也可以用 wx:elif 和 wx:else 来添加一个 else 块：    view wx:if="{{length  5}}" 1 /view    view wx:elif="{{length  2}}" 2 /view    view wx:else 3 /view

   • block: wx: if   并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。   

       block wx:if="{{true}}"        view view1 /view        view view2 /view    /block

   • wx:if 和 hidden
     
     1. wx: if是惰性的，只有在if条件改变时才会改变渲染，初始加载耗费性能较小，后续条件改变有更高的消耗，适合运行时条件不大可能会改变的渲染    
     2. hidden始终都会保持渲染，只是切换显示和隐藏，初始加载耗费性能较多，后续影响较小，适合频繁切换显示和隐藏   

4. 模板：

   • 定义模板：使用name属性，作为模板的名字。然后在内定义代码片段     

       !--        index: int        msg: string        time: string    --    template name="msgItem"        view            text {{index}}: {{msg}} /text            text Time: {{time}} /text        /view    /template

   • 使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入（is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：）    

       template name="odd"        view odd /view    /template    template name="even"        view even /view    /template    block wx:for="{{[1, 2, 3, 4, 5]}}"        template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/    /block

   • 模板作用域：模板有自己的作用域，只能使用data传入的数据

5. 事件   

   • 小程序的事件：
     
     1. 事件是视图层到逻辑层的通讯方式。
     2. 事件可以将用户的行为反馈到逻辑层进行处理。
     3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
     4. 事件对象可以携带额外信息，如 id, dataset, touches。
   • 事件的具体用法
     
     1. 在组件中绑定一个事件处理函数view id="tapTest" data-hi="WeChat" bindtap="tapName" Click me! /view
     2. 在Page的定义中写上相应的处理函数，参数是event

       Page({        tapName: function(event) {            console.log(event)        }    })

   • 事件分类：冒泡事件(事件向父组件传递)和非冒泡事件
     
     1. wx的冒泡事件：  
        
        • touchstart — 手指触摸动作开始    
        • touchmove — 手指触摸后移动     
        • touchcancel — 手指触摸动作被打断，如来电提醒，弹窗    
        • touchend — 手指触摸动作结束     
        • tap — 手指触摸后马上离开     
        • longtap — 手指触摸后，超过350ms再离开    
     2. 未作特殊说明的都是非冒泡事件   
   • 事件绑定：事件绑定的写法同组件的属性，以 key、value 的形式。     
   • key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart     
   • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。  
   • bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。   
   • 事件对象： 当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。打印事件event即可查看事件对象
     
     1. type: 事件类型   
     2. timeStamp: 从打开页面到触发事件所经过的毫秒数     
     3. target： 触发事件的源组件，包含组件ID，触发事件的tagName，dataset(事件源组件上由data-开头的自定义属性组成的对象集合)    
     4. currentTarget： 事件绑定的当前组件，属性同上        
     5. touches： touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
        touch对象属性：
        
        • identifier — 触摸点的标识符          
        • pageX, pageY — 距离文档左上角的距离，文档的左上角为原点     
        • clientX, clientY — 距离页面可显示区域（屏幕除去导航条）左上角距离
          CanvasTouch 对象:
        • identifier — 触摸点的标识符        
        • x,y — 距离 Canvas 左上角的距离      
     6. changedTouches：changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）  
     7. detail： 自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。  

6. 引用：WXML 提供两种文件引用方式import和include。       

   • import:import可以在该文件中使用目标文件定义的template

       // item.wxml        template name="item"        text{{text}}/text    /template    // index.wxml      import src="item.wxml"/    template is="item" data="{{text: 'forbar'}}"/    // import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

   • include: include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置  

       !-- index.wxml --    include src="header.wxml"/    view body /view    include src="footer.wxml"/    !-- header.wxml --    view header /view    !-- footer.wxml --    view footer /view

wxss:WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

 

WXSS 具有 CSS 大部分特性,同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。与 CSS 相比我们扩展的特性有：
 + 尺寸单位
     rpx: 规定屏幕宽度为750rpx，即宽度为375px的屏幕(iphone6)共有750个物理像素，则750rpx = 375px = 750物理像素
 + 样式导入
     使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
     内联样式：框架组件上支持使用 style(view style="color:{{color}};" /)、class(同css3) 属性来控制组件的样式。
 + 全局样式和局部样式： app.wxss 和 page.wxss (后者样式会覆盖前者)

兼容性解决：

• 问题来源： 低版本的微信程序不兼容新的小程序API，        

• 解决方法： 判断是否支持用户的手机。

      if (wx.openBluetoothAdapter) {        wx.openBluetoothAdapter()    } else {        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示        wx.showModal({            title: '提示',            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'        })    }

组件

下期继续。。。