大前端 - 微信小程序

目标：
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.初始化小程序

注册小程序账号

在小程序官网注册: https://mp.weixin.qq.com/wxopen/waregister?action=step1
注册微信公众号的邮箱，不能再注册微信小程序账号
注册成功后，在后台，获取小程序的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 . 看自己的项目需求。

小程序开发界面：

进入小程序：

解读初始化项目

目录结构
生命周期
app代码
index页面
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.loginconst logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},

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>

官方组件详细信息：

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})}
})

数据绑定

logs页面

小程序的模块化开发。
小程序中的模块化开发遵循 CommonJS 规范（exports、require）
wxml的列表渲染
wx:for
页面级别的配置
.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}})})}
})

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.发布小程序。

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

案例：使用第三方接口

注册账号；https://id.qweather.com/#/register
创建应用并申请秘钥（key）；key 是调用接口的凭证
开发集成（开发文档）。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)},
})

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

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

解决授权提示：

项目界面

官方组件与第三方组件

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

WeUI在微信小程序中使用

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

2.使用组件

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

发布小程序

1.上传代码

2.提交审核

https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1361790821&lang=zh_CN

3.发布版本

上传代码：
提交审核
发布版本