凯的个人博客

微信小程序高阶

6/10/2024 微信小程序

  • 微信UI 自带的组件--weui --colorUI

  • 微信小程序 api

    • 阅读文档方法
    • 常用api (获取当前用户的信息，扫码，获取本地联系人，拨打电话....)

  • we.request 三层封装

# 1.微信 UI

# 1.1 自带的UI组件--标签

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
1

# 1.2 npm的三方UI 组件

# 1.21 weui 官网支持

官网文档链接： https://wechat-miniprogram.github.io/weui/docs/quickstart.html

  • npm 下载
npm i weui-miniprogram
或
yarn add  weui-miniprogram
1
2
3
  • 安装之后，小程序开发者工具---菜单栏---工具---构建npm

如果构建之后 报错：

  • 解决方案： 关闭依赖项检测提示，并重启项目 project.config.json
  "setting": {
    "ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,
  }
1
2
3
4
  • 引入全局样式 app.wxss
/**app.wxss**/
/* 导入weui 全局样式 */
@import "./miniprogram_npm/weui-miniprogram/index.wxss";
1
2
3
  • 在需要使用这些组件的页面中 以 自定义组件的 形式进行 注册和使用 home.json
{
    "usingComponents": {
          "mp-badge": "weui-miniprogram/badge/badge"
    }
}
1
2
3
4
5
<mp-icon type="field" icon="album" color="black" size="{{25}}"></mp-icon>

<mp-dialog mask="true" mask-closable="true" show="{{show}}"></mp-dialog>

<button bindtap="showBtn">展示模态框</button>
1
2
3
4
5
6

# 1.22 vant weapp UI 使用

官网地址：

https://vant-contrib.gitee.io/vant-weapp/#/home
1
  • npm 安装
# 通过 npm 安装
npm i @vant/weapp 

# 通过 yarn 安装
yarn add @vant/weapp
1
2
3
4
5
  • 修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件 (opens new window)强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

  • 修改 project.config.json
{
  ...
  "setting": {
    ...
    "packNpmManually": true,
     "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

  • 安装之后，小程序开发者工具---菜单栏---工具---构建npm

  • 使用

{
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
    }
}
1
2
3
4
5
<van-button type="danger">按钮</van-button>
1

# 2.微信小程序 api

# 2.1 获取当前用户的 位置信息

获取当前用户位置 --提前配置 可以获取地址 app.json


 "requiredPrivateInfos":[
        "getLocation"
    ]
1
2
3
4
  <map class="box"  longitude="{{position.longitude}}" latitude="{{position.latitude}}"/>
1
  data: {
        position:{}
    },
1
2
3
   async getPosition(){
       let location = await  wx.getLocation();
       this.setData({
        position:location
       })
       console.log(this.data.position);
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //获取 当前用户的位置
        this.getPosition()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置 app.json 授权

  "permission": {
      "scope.userLocation":{
          "desc": "使用地图需要获取您的位置？"
      }
  },
1
2
3
4
5

# 2.2. 根据用户当前的位置信息 拿 城市【中文地址】

# 1.配置 app.json

向用户请求定位权限

让小程序可以 调用获取地址的api

 "requiredPrivateInfos":[
        "getLocation"
    ]，
  "permission": {
      "scope.userLocation":{
          "desc": "使用地图需要获取您的位置？"
      }
  },
1
2
3
4
5
6
7
8

# 2.在页面中 通过 wx.getLocation() 获取到用户的 当前位置（经纬度 高度）

# 3.通过经纬度 调用 三方地图 的api : 逆地址解析api

通过 经纬度 获取 中文地址【国家 省份 城市 区县/乡镇 街道 村 详细地址】

三方地图：

高德地图开放平台：逆地址解析api【账号认证 必须是 企业】

百度地图开放平台：

腾讯位置服务 ： https://lbs.qq.com/ 【细节非常多】

应用 key : 762BZ-AWIEQ-E3N5L-GW5X2-ZZZAE-C5BJM

//字符串拼接:请求 逆地址 解析的接口 的参数
let data = `location=经度,纬度&key=762BZ-AWIEQ-E3N5L-GW5X2-ZZZAE-C5BJM`
//调用 逆地址解析接口
//接口地址： https://apis.map.qq.com/ws/geocoder/v1/
//发送请求
wx.request({
    url:'',
    method:'',
    success(res){
       //res: 返回的地址信息
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

  • 发送 request 请求之前 先配置 服务器域名 告诉小程序 允许请求

    微信公众平台----小程序---开发-----开发管理---开发设置---服务器域名--添加https的域名

  data: {
        city:'北京'
    },
    //获取用户的位置
    async getUserLocation(){
        let _this = this;
        let location = await wx.getLocation()
        //拼接逆地址解析需要的 数据 纬度在前 经度在后
        let data = `location=${location.latitude},${location.longitude}&key=762BZ-AWIEQ-E3N5L-GW5X2-ZZZAE-C5BJM`;
        wx.request({
            url:'https://apis.map.qq.com/ws/geocoder/v1/?'+data,
            method:'get',
            success(res){
                _this.setData({
                    city:res.data.result.address_component.city
                })
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getUserLocation()
    },
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

# 4.业务流程

<view>
<!-- 进入页面的瞬间 拿到当前用户的城市 并展示 -->
<!-- 点击 更换城市：进入一个城市列表页面--选中一个城市---更改首页的城市显示 -->
   {{city}}  <van-icon name="location" />
</view>
1
2
3
4
5

# 3.常见api

# 3.1 getUserProfile 获取用户信息

小程序 内核版本 必须 低于 2.27以下===推荐：2.25.4 基础库

<!--pages/api/api.wxml-->
<button bindtap="getUserInfoBtn">立即登录</button>

<image src="{{userInfo.avatarUrl}}" mode=""/>
{{userInfo.nickName}}
1
2
3
4
5
 data: {
        userInfo:null
    },
    getUserInfoBtn(){
        let _this = this;
        wx.getUserProfile({
          desc: '请确认获取您的个人信息?',
          success(res){
              console.log(res);
            _this.setData({
                userInfo:res.userInfo
            })
          }
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3.2 scanCode 相机扫码

常见业务： 会员卡的核销， 美团订购服务生成二维码，调用扫码核销

  wx.scanCode({
            success(res){
                console.log(res);  //res.result  //成功信息
            },
            fail(err){
                console.log(err);
                wx.showToast({
                  title: '扫码失败！',
                })
            }
        })
1
2
3
4
5
6
7
8
9
10
11

# 3.3 chooseContact 选择联系人

 wx.chooseContact({
            success(res){
                console.log(res);
            },
            fail(err){
                console.log(err);
            }
        })
1
2
3
4
5
6
7
8

# 3.4 makePhoneCall 拨打电话

<button bindlongpress="tell" data-phoneNum="13648242772">13648242772</button>
1
tell(e){
  // 提示呼叫号码还是将号码添加到手机通讯录
  wx.showActionSheet({
      itemList: ['呼叫','添加联系人'],
      success:function(res){
          if(res.tapIndex===0){
            console.log(e.target);
              // 呼叫号码
              wx.makePhoneCall({
              phoneNumber: e.target.dataset.phonenum
              })
          }else if(res.tapIndex==1){
              // 添加到手机通讯录
              wx.addPhoneContact({
              firstName: 'test',//联系人姓名
              mobilePhoneNumber: e.target.dataset.phonenum,//联系人手机号
              })
          }
      }
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 3.5 onShareAppMessage 分享-生命周期

当用户点击 胶囊 ... 自定触发这个函数

 onShareAppMessage() {
        const promise = new Promise(resolve => {
            setTimeout(() => {
              resolve({
                title: '源码1'
              })
            }, 2000)
          })
          return {
            title: '源码',
            path: '/page/home',
            promise 
          }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4.本地存储

  • wx.setStorageSync 存数据
cosnt data = {name:'xxx',age:111};

wx.setStorageSync('user',data);
1
2
3
  • wx.getStorageSync 取数据
wx.getStorageSync('user');   //{name:'xxx',age:111};
1

# 5.关于小程序上线

1.完成开发之后 ---微信开发者工具---点击上传---体验版（）

2.微信公众平台---小程序--版本管理--开发版本---生成体验版（体验版二维码）

3.体验版二维码：

体验版: 完全和 上线之后 一模一样功能的 版本，能够访问体验版的小程序，只有参与项目 开发的人员微信，体验版（测试人员）

项目参与人员设置：

面试大纲