微信程序开发.小程序入门（二）

学习网站：框架 | 微信开放文档

 00.一个小程序页面由四个文件组成，分别是:

  xxx     
    xxx.js        页面逻辑
    xxx.json      页面配置
    xxx.wxml      页面结构
    xxx.wxss      页面样式

01.小程序框架组成

   在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
   1.逻辑层
     1.注册小程序
     2.注册页面
     3.页面生命周期
     4.页面路由
     5.模块化
     6.API
   2.视图层
     1.wxml
     2.wxss
     3.wxs
       wxs是微信小程序自身的脚本语言，用来过滤和计算。wxs可以通过文件可模块标签来定义，文件需要.wxs后缀文件
       wxs是专门用于wxml页面的，如果你有在页面中使用js脚本的需求可以使用，但是wxs是不能被其它js文件引用的
       实际开发应该根据情况，选择使用js或wxs，但本人的绝大部分开发都是用js中完成的
## 示例1：小程序的生命周期

02.注册小程序

  每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、
   错误监听和页面不存在监听函数等
   1.创建App实例，小程序生命周期函数（vue叫钩子函数）
   // app.js
   App({
     onLaunch (options) {//监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
       // Do something initial when launch.
     },
     onShow (options) {//监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
       // Do something when show.
     },
     onHide () {//监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
       // Do something when hide.
     },
     onError (msg) {//错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
       console.log(msg)
     },
     globalData: 'I am global data'
   })

 

   注1：与SPA项目的比较
        1.相当于SPA项目中的main.js中定义全局Vue对象,
        2.onLaunch/onShow/onHide/onError就相当于钩子函数
   注2：其他开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
          

   2.整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法
     获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
     // xxx.js  var  let  const  定义常量
     const appInstance = getApp()
     appInstance = .....    //  XXXXX
     console.log(appInstance.globalData) // I am global data

## 示例2：数据绑定/生命周期/数据继承

03.注册页面

   对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等
   简单的页面可以使用Page(Object object)构造器进行构造。
   
   Page(Object object)构造器作用：
   注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

   Page({
     data: {//页面第一次渲染使用的初始数据
       text: "This is page data."
     },
     onLoad: function (options) {//监听页面加载
       console.log("page ---onLoad---");
     },
     onReady: function () {//监听页面初次渲染完成
       console.log("page ---onReady---");
     },
     onShow: function () {//监听页面显示
       console.log("page ---onShow---");
     },
     onHide: function () {//监听页面隐藏
       console.log("page ---onHide---");
     },
     onUnload: function () {//监听页面卸载
       console.log("page ---onUnload---");
     }
   })

  

   其中，打开小程序后会依次执行onLoad，onShow和onReady方法
   前后台切换会分别执行onHide和onShow方法，
   当小程序页面销毁时会执行onUnload方法
  
   注1：如何让让多个页面有相同的数据字段和方法(bindInput)？在页面中使用 behaviors(vue中无此功能)
        // my-behavior.js
        module.exports = Behavior({
          data: {
            sharedText: 'This is a piece of data shared between pages.111'
          },
          methods: {
            sharedMethod: function() {
              return "This is a piece of data shared between pages.222";
            }
          }
        })

        // page-a.js
        var myBehavior = require('./my-behavior.js')
        Page({
          behaviors: [myBehavior],
          onLoad: function() {
            console.log(this.data.sharedText)//继承属性及方法的调用
            console.log(this.sharedMethod())
          }
        })
        
   注2：Page构造器适用于简单的页面。但对于复杂的页面使用 Component 构造器构造页面
        omponent 构造器的主要区别是：方法需要放在 methods: { } 里面
        Component({
          data: {
            text: "This is page data."
          },
          methods: {
            onLoad: function(options) {
              // 页面创建时执行
            },
            onPullDownRefresh: function() {
              // 下拉刷新时执行
            },
            // 事件响应函数
            viewTap: function() {
              // ...
            }
          }
        })

   注1：重要的事情说三次“不要在vscode中创建页面，微信开发者工具不会进行编译，在app.json的pages添加ctrl+s即可”

04.页面生命周期(了解)    
   

### 重要
05.小程序配置

   1.全局配置文件(重要)
     小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、
     窗口表现、设置网络超时时间、设置多 tab 等
     -tabbar(最少2个分栏)
      演示示例：首页、购物车、我的
     -pages
      演示示例：小程序标题、页面标题文字
     -window
   2.sitemap.json(了解)    
     小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引

## 示例3：页面路由:组件跳转(绝对路径和相对路径)，API跳转

06.页面路由

  在小程序中所有页面的路由全部由框架进行管理。
   框架以栈的形式维护了当前的所有页面。
   1.当发生路由切换的时候，页面栈的表现如下
     路由方式    页面栈表现
     初始化     新页面入栈
     打开新页面 新页面入栈
     页面重定向 当前页面出栈，新页面入栈
     页面返回   页面不断出栈，直到目标返回页
     Tab 切换   页面全部出栈，只留下新的 Tab 页面
     重加载     页面全部出栈，只留下新的页面
     开发者可以使用 getCurrentPages() 函数获取当前页面栈。

   2.路由方式
     对于路由的触发方式以及页面生命周期函数具体详情见官网文档

   注1：栈是一个先进后出的数据结构(子弹夹)
   注2：演示如何指定页面启动(重要)
        1.修改路由配置
        2.添加启动配置，指定启动页面

小程序中：this.data.xxx和this.setData区别

##示例4-1：路由中添加参数
##示例4-2：数字自增与自减(如何在事件中传递参数+1或-1)
##示例4-3：数据双向绑定

07.微信小程序事件绑定(重要)

    1.事件类别：
     tap：点击事件
     input：输入事件
     longtap：长按事件；
     touchstart：触摸开始；
     touchend：触摸结束；
     touchcansce：取消触摸；

     注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数
          错误
          <button bindtap="handletap(-1)"
          正确
          <button bindtap="handletap" data-number="{{-1}}"

          正解：传递固定值-1 
                data-number="{{-1}}"
                还可以绑值
                data-number="{{n}}" 

                再从事件对象中获取
                 e.currentTarget.dataset.number
          

     注2：在微信小程序中，js的数据和前端显示的数据是单数据流。
          即js里边的数据变了，前端能立刻显示，但如果前端数据变了，js不能改变，怎么办呢！

          我们可以通过bindinput方法，来实现双向数据绑定。

          原理：我们使用bindinput事件来获取input的输入值，然后根据dataset获取要跟 data数组里的对象进行数据绑定
          具体写法
          //1.在data中定义dataList属性，并在其中定义要双向绑定的属性名
          //2.定义bindInput方法
          //3.<input class="input" bindinput="bindInput" data-name="username" placeholder="请输入帐号" auto-focus/>
            bindInput(e) {
              console.log("bindInput");
              //debugger
              // 表单双向数据绑定
              var that = this;
              var dataset = e.target.dataset;
              // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
              var name = dataset.name;
              var value = e.detail.value;

              //小问题：规则接收数据属性只能叫dataList
              that.data.dataList[name] = value; //逻辑层数据的更改
              // 拼接对象属性名，用于为对象属性赋值
              var attributeName = "dataList." + name;
              that.setData({//视图层数据的更改
                [attributeName]: value
              });
              console.log(that.data.dataList);
            }
    
   2.事件绑定：
     bind绑定；
     catch绑定；（能阻止事件冒泡）
     例如：绑定点击事件 bindtap
     page.wxml 文件

   3.接收参数
        Page({
          onLoad: function(options) {
            //小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx'; 
            this.setData({
              title: options.title
            })
          }
        })

   

## 示例4：模块化

08.模块化

   可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块

   注1：可参考utils/util.js被logs/logs.js引用
   注2：定义模块时建立直接定义一个对象 
        //common.js
        module.exports = {
          sayHello: function (name) {
            console.log("Hello %s", name);
          },
          sayGoodbye: function (name) {
            console.log("Goodbye %s", name);
          }
        };
   

09.API(重要)

   小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，
   如获取用户信息，本地存储，支付功能等
   API的分类
   1.事件监听API
     以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen
     
   2.同步 API
     以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync

   3.异步 API
     大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，
     这个参数都支持按需指定以下字段来接收接口调用结果

### 视图层    
10.wxml(重要)

  wxml（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
   小程序模板语法
   1.数据绑定
   2.列表渲染(即循环)
     演示示例：block标签的使用(写代码时存在，页面在渲染时则没有任何显示)
   3.条件渲染(即if)
   演示示例：数据绑定、for、if

   4.模板(与vue不同)
     WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
     ①.定义模板
       <template name="msgItem">...</template>
     ②.使用模板
       <template is="msgItem" data="{{...item}}"/>
   5.引用
     WXML 提供两种文件引用方式import和include

   注1：有vue经验掌握此内容非常容易^_^

11.WXSS

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

   WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
   为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
   与 CSS 相比，WXSS 扩展的特性有：
   尺寸单位
   rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
   如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

   样式导入

12.WXS(略，不重要)

   WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

附录一：require函数简要说明 
require(...)是Javascript中用于模块化编程的一个函数，用于加载模块。
假定有一个数学模块math.js，就可以像下面这样加载
var math = require('math');
然后，就可以调用模块提供的方法：
var math = require('math');
math.add(2,3); // 5

附录二：微信开发者工具 黑屏的解决方案
注1：每个人的User Data下的估计名字不一样，但是都在WeappLocalData目录下
C:\Users\Administrator\AppData\Local\微信开发者工具\User Data\a8265259807471d9496af75b01f1850f\WeappLocalData

###附录三的问题使用wechat_devtools_1.03.2009140_x64版本进行开发始终无法解决--20201030
###20201104解决方案：清除缓存，重新打开此项目即可
###
附录三：未找到 app_json 中的定义的 pages pages-category-index 对应的 WXML 文件的解决方案
是编辑器的bug，解决方案是，比如我要建立一个order文件，他有两种建立方式：
第一种： 直接在app.json里面建立pages/order/order，编辑器会自动创建相应的文件夹以及文件，并且不会报错；
第二种： 我们手动在pages下面建立文件集order，并创建相应的文件，再在app.json里添加相应的路径，
但是这时候系统就会报：未找到 app.json 中的定义的 pages “pages/order/order” 对应的 WXML 文件，很诡异。
然后我们需要怎么解决呢，把app.json的pages删除（记得备份），然后保存，
关闭编辑器，再打开，把刚复制的路径重新放进去，发现不报错了，可以愉快的玩耍了

如果成功：控制台会显示如下信息
[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/reg/reg] 将被索引

未找到 app.json 中的定义的 pages "pages/xxx/xxx" 对应的 WXML 文件
问题定位：
编辑器的bug

解决方法：
1.将app.json中关于页面pages中的清空(记得备份)
2.清空后保存
3.关闭微信开发工具，重启
4.将文件配置复制粘贴回来
5.页面生成成功

附录四：微信小程序this.data和this.setData({})的区别

this.data.xx是用来获取页面data对象的----------只是js（逻辑层）数据的更改；
this.setData是用来更新界面的---------用于更新view层的。
总结一下就是：this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，
而界面是从this.setData里面托管的this.data的副本取数据的。
所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。
详情可参考：资料/06 01.mht~06 03.mht