云裂变营销网

标题: 微信小程序高阶 [打印本页]
作者: 匿名    时间: 2023-3-10 10:34
标题: 微信小程序高阶
前言：

微信小程序中最为强大的 是 微信的内置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 获取城市

  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.分包上线
作者: julywolf    时间: 2023-3-10 10:36
写的很好，不用再写了



欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/) Powered by Discuz! X3.4