大前端 - 微信小程序

yanling.zhang

已于 2023-03-28 17:07:42 修改

阅读量553

点赞数

分类专栏：大前端学习文章标签：微信小程序前端小程序

于 2022-06-23 20:58:18 首次发布

本文链接：https://blog.csdn.net/weixin_38245947/article/details/125434077

版权

大前端学习专栏收录该内容

56 篇文章 7 订阅

订阅专栏

目标：
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.login
    
    const 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.发布版本

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

yanling.zhang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录