微信程序开发小程序入门

1.小程序简介

微信官方文档

小程序的生命周期

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
       
      }
    })
  },
  onShow (options) {
    // Do something when show.
    console.log("显示")
  },
  onHide () {
    // Do something when hide.
    console.log("隐藏")
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
    userInfo: null
  }
})

安装成功之后扫描二维码

创建一个小程序

创建成功后的界面

我们这个时候需要创建一个login

 

index.wxss

image{
  width: 400px;
  height: 400px;
  border-radius: 50%;
}

index.wxml

<view>
  <navigator url="/pages/login/login">
    <button>登录</button>
  </navigator>
</view>

login.js

Page({
    data: {
        msg:"nihao",
        user:{
            username:"hmf",
            password:""
        }
    },
    bindName(e){
        //arguments是函数的参数
        //console.log(arguments)
        this.setData({
            "this.username":e.detail.value
        })
    },
    bindPwd(e){
        //arguments是函数的参数
        //console.log(arguments)
        this.setData({
            "this.userPwd":e.detail.value
        })
    },
    aa(){
        wx.showToast({
            title:"xx",
            icon:"success"
        })
    },
    bb(){
       this.data.user.username=""
        this.data.user.password=""
    }
})

login.wxml

<view>
    <image src="/aa/xf2.jpg" mode="aspectFit"/>
</view>
<view>
    <form bind:submit="aa" bind:reset="bb">
        <label>名字</label>
        <input value="{
   
   {user.username}}" bind:input="bindName" value="" type="text" placeholder="请输入用户名字" maxlength="10"/>
        <label>密码</label>
        <input value="{
   
   {user.password}}" bind:input="bindPwd" value="" type="text" placeholder="请输入用户密码" password="true" maxlength="10"/>
        <label>爱好</label>
        <checkbox-group>
            <checkbox checked="{
   
   {true}}">喝奶茶</checkbox>
            <checkbox>k歌</checkbox>
            <checkbox>吃</checkbox>
        </checkbox-group>
        <radio-group>
            <radio value="女" checked="true">女</radio>
            <radio value="男">男</radio>
        </radio-group>
        <view>
            <button form-type="submit">登录</button>
            <button>注册</button>
            <button form-type="reset">清空</button>
        </view>
    </form>
    <view>
        {
   
   {user.username}}
    </view>
</view>

登录成功

清空

 

 最后

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实例，小程序生命周期函数
   // 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
     const appInstance = getApp()
     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，onReady和onShow方法
   前后台切换会分别执行onHide和onShow方法，
   当小程序页面销毁时会执行onUnload方法

   注1：如何让让多个页面有相同的数据字段和方法？在页面中使用 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即可”
        重要的事情说三次“不要在vscode中创建页面，微信开发者工具不会进行编译，在app.json的pages添加ctrl+s即可”
        重要的事情说三次“不要在vscode中创建页面，微信开发者工具不会进行编译，在app.json的pages添加ctrl+s即可”

04.页面生命周期(了解)    
   详情见：images/01 page-lifecycle.png

### 重要
05.小程序配置
   1.全局配置文件(重要)
     小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、
     窗口表现、设置网络超时时间、设置多 tab 等
     -tabbar(最少2个分栏)
      演示示例：首页、购物车、我的
      注1：为什么底部不出现TabBar？pages数组的第一项必须是tabBar的list数组的一员
      注2：最少2个按钮，最多5个 
     -pages
      演示示例：小程序标题、页面标题文字
     -window
   2.sitemap.json(了解)    
     小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引

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

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

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

##示例4-1：路由中添加参数
##示例4-2：数字自增与自减(如何在事件中传递参数+1或-1)
##示例4-3：数据双向绑定
07.微信小程序事件绑定(重要)
   1.事件类别：
     tap：点击事件
     input：输入事件
     longtap：长按事件；
     touchstart：触摸开始；
     touchend：触摸结束；
     touchcansce：取消触摸；

     小程序绑值
     1.单向绑定 M --> V
                                       setData 
     2.单向绑定其实绑定的是M的一个副本M--------->副本-->V

     注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="realName" 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），可以在模板中定义代码片段，然后在不同的地方调用。
     1.定义模板
       <template name="msgItem">...</template>
     2.使用模板
       <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