微信小程序高阶

前言：

微信小法式中最为强大的 是 微信的内置API，内置API 可以支持在 小法式中 快速挪用微信软件的部分功用，可以快速对接一些营业需求，比如： 收集请求，付出，数据缓存，数据分析，文件操纵，位置获得，手机硬件挪用等等。
文档链接： https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.env.html
1.收集请求 wx.request()

类似于axios 用来发送收集请求，获得后真个数据，
wx.request 方式没有经过 Promise 停止封装,利用起来比力麻烦。
假如需要在微信小法式 请求 https:// 的后端接口，需要配购置事器白名单才可以正确请求，不会会被微信阻挡，设置方式：办事器域名请在 「小法式背景 - 开辟 - 开辟设备 - 办事器域名」 中停止设置  https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

1. wx.request({
2.   url: 'example.php', //仅为示例，并非实在的接口地址
3.   data: {
4.     x: '',
5.     y: ''
6.   },
7.   header: {
8.     'content-type': 'application/json' // 默许值
9.   },
10.   success (res) {
11.     console.log(res.data)
12.   }
13. })

复制代码

• 利用案例
  

1. // index.js
2. Page({
3.   data:{
4.   },
5.   getData(){
6.     wx.request({
7.       url: 'http://129.211.169.131:6368/getFractionShop', //仅为示例，并非实在的接口地址
8.       success (res) {
9.         console.log(res.data)
10.       }
11.     })
12.   },
13.   onLoad(){
14.     this.getData()
15.   }
16. })

复制代码

2.收集请求的企业级三层封装

在挪用接口时，很多时辰都需要停止封装，为了更方便的利用

2.1 前置，提取公共办事器url  utils/common.js

1. export const  BaseUrl = 'http://129.211.169.131:6368'

复制代码

2.1 第一层 utils/request.js

1. import {BaseUrl} from './common'
3. //操纵 Promise 封装 request 请求
4. export const request = (url,method,data={})=>{
5.   return new Promise((resolve,reject)=>{
6.       wx.request({
7.         url:BaseUrl+url,
8.         method,
9.         data,
10.         success(res){
11.           console.log(res);
12.            resolve(res)
13.         },
14.         fail(err){
15.           reject(err)
16.         }
17.       })
18.   })
19. }

复制代码

2.2 第二层 接口对应层  /api/users.js

1. import {request} from '../utils/request'
3. // get
4. export  const getList = ()=>request('/getFractionShop','get');
6. // post
7. export  const xxx = (data)=>request('/xxxx','post',data);

复制代码

2.3 第三层 接口挪用层

页面的js文件中

1. // index.js
2. import {getList} from '../../api/data'
3. Page({
4.   data:{
6.   },
7.   getData(){
8.    getList().then(res=>{
9.       console.log(res.data);   //获得到返回数据
10.     })
11.   },
12.   onLoad(){
13.     this.getData()
14.   }
15. })

复制代码

3.当地存储

4.小法式定位+腾讯舆图 逆地址剖析api 获得城市

• 注册腾讯位购置事-开辟者账号  https://lbs.qq.com/
  
• 利用治理--我的应---建立新利用--【留意：建立利用时，需要传入 小法式的 appId（微信公众平台申请且绑定到当前小法式）】
  
• 建立利用后，建立key:  【必选：webServiceAPI，填写自己小法式的 appId】
  
• 微信小法式中 利用 wx.getLocation() 获得当前用户的 经纬度信息
  
• 获得到 当前用户的 经纬度以后，挪用腾讯位购置事中的   逆地址剖析API【经过经纬度获得地址数据】
  

1. async getCity(){
2.     let location =  await wx.getLocation();
3.     let optionStr = `location=${location.latitude},${location.longitude}&key=2U5BZ-3C66V-FFPP7-UEM3K-NOZNE-LBFUL`;
4.     wx.request({
5.       url:`https://apis.map.qq.com/ws/geocoder/v1/?${optionStr}`,
6.       method:'get',
7.       success(res){
8.         console.log(res.data.result);
9.       }
10.     })

复制代码

img

5.获得用户信息  getUserProfile

微信小法式获得用户信息-登录法则调剂通告：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

1. <button bindtap="getUserProfile"> 点击获得信息</button>
2. getUserProfile(e) {
3.     // 保举利用 wx.getUserProfile 获得用户信息，开辟者每次经过该接口获得用户小我信息均需用户确认
4.     // 开辟者妥帖保管用户快速填写的头像昵称，避免反复弹窗
5.     wx.getUserProfile({
6.       desc: '用于完善会员材料', // 声明获得用户小我信息后的用处，后续会展现在弹窗中，请谨慎填写
7.       success: (res) => {
8.             //res  返回的用户信息： 包括头像 用户名
9.       }
10.     })
11.   },

复制代码

6.用户 登录

6.1 登录流程图





img

6.2 预备工作：

在小法式背景（开辟治理---开辟设备），拿到 AppID 与 AppSecret 秘钥  交给后端，【微信说：原则上，前端不能存储AppSecret 【为了平安，避免前端爬虫】 】

6.3 前端拿到 code  发送给后端，后端返回openid 和seesionkey

后端接口地址： http://115.159.153.85:5002/getOpenId
请求方式： post
请求数据：
AppID: 小法式appid     AppSecret:小法式治理平台秘钥  code:login接口的返回值

utils/common.js

1. export const WXAPP = {
2.   AppID:'wx5484e4642189d850',
3.   AppSecret:'a75403a4491dc2cf67d81aecc010bb88'
4. }

复制代码

页面.js

1. onload(){
2.     wx.login({
3.       success: (res) => {
4.         let data = {
5.           AppID:WXAPP.AppID,
6.           AppSecret:WXAPP.AppSecret,
7.           code:res.code
8.         }
9.        wx.request({
10.          url:'http://115.159.153.85:5002/getOpenId',
11.          method:'post',
12.          data,
13.          success(res){
14.            console.log(res);  // {session_key: "5mBqgkPgAkyLW623B3mfHg==", openid: "oxqa_5FE_ZAQKDeRV3-37CkUVVbg"}
15.          }
16.        })
17.       },
18.     })
19. }

复制代码

8.相机扫码

1. // 答应从相机和相册扫码
2. wx.scanCode({
3.   success (res) {
4.     console.log(res.result)  //扫码获得的数据
5.   }
6. })
8. // 只答应从相机扫码
9. wx.scanCode({
10.   onlyFromCamera: true,
11.   success (res) {
12.     console.log(res)
13.   }
14. })

复制代码

9.挑选联系人

1. <button  bindtap="chooseContact">挑选联系人</button>
2. chooseContact() {
3.         wx.chooseContact({
4.           success: function (res) {
5.             console.log(res, '成功回调')
6.           },
7.           fail(res) {
8.             console.log(res, '毛病回调')
9.           },
10.           complete(res) {
11.             console.log(res, '竣事回调')
12.           }
13.         })
14.       }

复制代码

10.拨打电话

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

复制代码

4. 小法式分享

1. https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

复制代码

• 发送给朋友
  

1. /**
2.    * 用户点击右上角分享
3.    */
4.   onShareAppMessage() {
5.     const promise = new Promise(resolve => {
6.       setTimeout(() => {
7.         resolve({
8.           title: '源码1'
9.         })
10.       }, 2000)
11.     })
12.     return {
13.       title: '源码',
14.       path: '/page/home',
15.       promise
16.     }
17.   }
18. })

复制代码

5.微信付出

6.分包上线

写的很好，不用再写了