大前端 - 微信小程序

目标：
1.小程序简介
2.微信小程序基础
3.解读初始化项目
4.项目实践
5.项目发布

微信小程序简介

小程序：移动端的开发。
传统App（Android/Ios）的开发和运营成本很高。

最早推出小程序的是微信团队。

相对原声App而言，小程序无需单独下载。只需要搜-搜，或扫一扫，就能直接使用小程序。

小程序寄生在app中，app自带流量，小程序营销成本低。

小程序简单易学。

• 小程序开发和网页开发的区别：
  1.小程序中不能使用HTML,小程序展现内容由自己的语法。
  2.小程序中可以使用css
  3.小程序的主要开发语言是javascript.但是dom和bom的js库也不能使用

• 小程序的运行环境和网页开发不通
  网页开发的运行环境是浏览器。
  微信小程序的运行环境是操作系统（Android/Ios）上的微信客户端。
  小程序的运行环境 = 渲染层（内容 + 样式） + 逻辑层（javascript）
  
  

微信小程序基础

1.注册小程序账号
2.搭建开发环境
3.初始化小程序

注册小程序账号

1. 在小程序官网注册: https://mp.weixin.qq.com/wxopen/waregister?action=step1
2. 注册微信公众号的邮箱，不能再注册微信小程序账号
3. 注册成功后，在后台，获取小程序的AppID

搭建开发环境

• 下载微信开发者工具
  去小程序官网，下载微信开发者工具
  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

初始化小程序

双击下载安装的微信开发者工具：出现如下视图：

• 填写初始化信息
  项目名称：自定义

目录：设置本地空目录（用来存储初始化后的小程序代码）小程序代码存放的地址

AppID：登录小程序后台查看（设置 -> 基本设置 -> 账号信息）

查看AppID：https://mp.weixin.qq.com/wxamp/basicprofile/index?token=946211380&lang=zh_CN

开发模式：小程序

后台服务：不使用云服务

语法：JavaScript / typescript . 看自己的项目需求。

小程序开发界面：

• 进入小程序：
  

解读初始化项目

1. 目录结构
2. 生命周期
3. app代码
4. index页面
5. logs页面

• 目录结构
  全局文件：文件名是固定的，不能修改。
  

• 页面文件：每个页面文件必须有这4个文件组成。页面文件不是手动创建的，而是自动生成的。
  全局配置 - 路由与页面，全局配置完成，页面文件自动就生成了。

index.wxml其实就相当于.html文件。

在app.json中的pages中配置好，页面文件自动生成。

在app.json文件中：
1.window对应的配置是顶部条的。可以修改。
2. tabBar设置底部导航。

文档：微信小程序 - window-全局配置

生命周期

在微信小程序中生命周期分为：1.小程序的生命周期 2.页面的生命周期

• 小程序的生命周期：
  
  
• 页面生命周期（pagename.js）
  

页面生命周期流转图：

页面生命周期函数的调用顺序：

云 API

什么是云api ？官方推出的，供小程序调用的云端api。
这些接口不需要自己开发，不需要自己部署。
云api地址：https://developers.weixin.qq.com/miniprogram/dev/api/

app.js中使用的云api：

 onLaunch() {
    // 展示本地存储能力
    // 云api：当前使用的云api，都可以在云api地址中找到
    // wx.getStorageSync
    // wx.setStorageSync
    // wx.login
    
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• app.json

全局配置

• app.wxss
  css样式

• index页面

index.wxml页面也是就是index.html,呈现网页内容的。

wxml：是微信专门开发的标签语言。wxml中展示内容的具体标签，我们称为组件。

组件：

wxml与组件之间的关系，其实就相当于html与标签之前的关系。

WXML 相当于小程序中的模板引擎
数据绑定
数据展示（条件渲染、列表渲染）

wxml语法文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

组件语法文档：https://developers.weixin.qq.com/miniprogram/dev/component/

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
    <!--bindtap：事件绑定  -->
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <!--wx:eli：小程序语法  -->
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

官方组件详细信息：

index.js

// index.js
// 获取应用实例
// getApp()获取的结果其实就是app.js生成的实例
const app = getApp()

// Page: 表示当前页面
Page({
 // data： 数据变量
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

• 数据绑定
  

logs页面

1. 小程序的模块化开发。
   小程序中的模块化开发遵循 CommonJS 规范 （exports、require）

2. wxml的列表渲染
   wx:for

3. 页面级别的配置
   .json 文件配置页面
   .wxss 文件设置样式

logs.js

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

logs.wxml:

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log.date}}</text>
  </block>
</view>
1
2
3
4
5
6

项目实战

项目实践：1.数据接口。2.项目界面。3.功能组合。4.发布小程序。

• 数据接口： 1.申请数据接口 2.调试接口。3.调用接口

• 申请数据接口：
  后端工程师： 例如：express开发的
  模拟接口（mock api）：例如：rap2
  第三方接口：例如：和风天气平台获取天气预报的接口。

案例：使用第三方接口

1. 注册账号；https://id.qweather.com/#/register

2. 创建应用并申请秘钥（key）；key 是调用接口的凭证

3. 开发集成（开发文档）。1请求接口的语法 2. 返回数据的示例

• 调试接口
  调试接口工具：postman，loadrunner，insomnia

• 小程序调用接口：

wx.request

使用的时候接口报错：XXXXX 不在以下 request 合法域名列表中
解决方案：
1.开发阶段解决方案：不校验合法域名
2.上线阶段解决方案：绑定请求接口域名

wx.request({
 url: 'https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html',
 data: {},
 header: {},
 success: function (data) {
   console.log('data', data)
 },
})
1
2
3
4
5
6
7
8

• 获取实时地理位置
  wx.getLocation()

wx.getLocation({
  url: 'https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html',
  success: function (data) {
    console.log('data', data)
  },
})
1
2
3
4
5
6

解决授权提示：

项目界面

官方组件与第三方组件

1. 官方组件：基础功能（HTML标签）
2. 第三方组件：组合功能（Bootstrap）

• WeUI在微信小程序中使用

1. 下载地址：https://github.com/Tencent/weui-wxss
2. 引入
   解压后，找到 dist/style/ 目录下的 weui.wxss 文件，将 weui.wxss 复制到小程序的根目录中。在全局样式文件 app.wxss 中加入 @import “weui.wxss”。
3. 使用：通过微信开发者工具打开解压后的 dist 目录。根据代码的目录找到对应的代码

WeUI - https://weui.io/
![在这里插入图片描述](https://img-blog.csdnimg.cn/6625542ef8884d82900b74448fd53f87.pn

模版功能（组件化开发）

1.声明模版
2.调用模版

案例：footer组件

1.定义组件
template/footer.wxml

<template name="my-footer">
  <view class="weui-footer">
    <view class="weui-footer__links">
      <navigator class="weui-footer__link weui-wa-hotarea" url="javascript:">底部链接</navigator>
    </view>
    <view class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</view>
  </view>
</template>
1
2
3
4
5
6
7
8

2.使用组件

<!-- 引入页脚模版文件 -->
<import src="/template/footer"></import>

<template is="my-footer"></template>

1
2
3
4
5

发布小程序

1.上传代码
2.提交审核
3.发布版本

• 上传代码：
  

• 提交审核
  

• 发布版本