小程序原生4-优快云博客

本文链接：https://blog.youkuaiyun.com/weiweiweb888/article/details/122003418

授权

概述

(1)部分接口需要经过用户授权同意才能调用,比如获取用户信息，保存图片到相册等，我们把这些接口按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。
(2)此类接口调用时：

如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
如果用户已授权，可以直接调用接口；
如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

检测授权状态

wx.getSetting({
    success(res){
        res.authSetting//中有用户授权过的权限。
    }
})

进行授权

 wx.authorize

Page({
  _record(){
    // 1.检测是否授权过
    wx.getSetting({
        success(res){
          if(res.authSetting["scope.record"]){
              //已授权，只调用录音接口。
              wx.startRecord()
          }else{
			//未授权则需要先授权在成功的回调中开启录音界接口。
            wx.authorize({
              scope: 'scope.record',
              success () {
                wx.startRecord()
              }
            })
          }
        }
    })
  }
})

获取用户信息

原来的版本(了解，已经不用了)

<!-- 原来获取用户信息 -->
<button open-type="getUserInfo" bindgetuserinfo="_getUserInfo" >获取用户信息</button>

通过API获取用户信息

wxml

<!-- 最新的获取用户信息 -->
<view wx:if="{{ status }}">
    <view>昵称:{{ userInfo.nickName }}</view>
    <image style="width:60px;height:60px;border-radius:50%" src="{{ userInfo.avatarUrl }}"></image>
</view>

<button wx:else bindtap="_getUserInfo">获取用户信息</button>

Page({
  data:{
    userInfo:{}, //用户信息集合
    status:false,//登录状态
  },
  onLoad(){
    // api的兼容处理
    if(!wx.getUserProfile){
      wx.showModal({
          title:"版本提示",
          content:"当前版本过低，请升级微信客户端版本"
      })
      return;
    }
    var userInfo = wx.getStorageSync('userInfo') || null;
    if(userInfo === null){
        this.setData({
          status:false
        })
    }else{
      this.setData({
        userInfo,
        status:true
      })
    }
    //只能根据事件触发
    // wx.getUserProfile({
    //   desc: '登录操作',
    //   success(res){
    //     console.log(res)
    //   }
    // })
  },
  _getUserInfo(){
    if(!wx.getUserProfile){
      wx.showModal({
          title:"版本提示",
          content:"当前版本过低，请升级微信客户端版本"
      })
      return;
    }
    var  _this=  this;
    wx.getUserProfile({
      desc: '登录操作',
      success(res){
        // console.log(res)
        _this.setData({
          userInfo:res.userInfo,
          status:true
        })
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },
})

基础库兼容

// api的兼容处理
    if(!wx.getUserProfile){
      wx.showModal({
          title:"版本提示",
          content:"当前版本过低，请升级微信客户端版本"
      })
      return;
    }

获取用户手机号

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

(1)获取微信用户绑定的手机号，需先调用wx.login接口;
(2)需要用户主动触发才能发起获取手机号接口,该功能不由 API 来调用，需用 button 组件的点击来触发
(3)目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）

使用方法：

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据，然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

微信登录

开放数据检验与解密

小程序可以通过各种前端接口获取微信提供的开放数据,但是开发者服务端获取这些开放数据时，需要对发放数据进行解密;

获取手机号码

测试号地址：https://developers.weixin.qq.com/sandbox

1.需要调用wx.login
2.使用button实现
3.针对非个人账号（可以使用测试账号进行开发）
4.实现的过程
	需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号,注意三方服务端需要app_id与secret一致。

代码案例：

wxml

<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="_getPhoneNumber">获取手机号</button>

 _getPhoneNumber(e) {
    var {
      encryptedData,
      iv
    } = e.detail;
     //验证是否登录
    wx.checkSession({
      success: (res) => {
        // 调用自己的服务端接口
        var data = {
          url: "/v1/getPhoneNumber",
          data: {
            encryptedData,
            iv
          },
          method: "get"
        }
        var result = await http(data);
        console.log(result); //result里面返回真实的手机号
      },
      fail(err) {
        wx.login({
          async success(res) {
            var code = res.code; //获取临时登录凭证
            // 调用自己的服务端接口
            var data = {
              url: "/v1/getPhoneNumber",
              data: {
                encryptedData,
                iv,
                code
              },
              method: "get"
            }
            var result = await http(data);
            console.log(result); //result里面返回真实的手机号
          }
        })
      }
    })
  },

WeUI组件库

组件库概述

一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

安装构建使用

通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。

app.json配置

{
     "useExtendedLib":{
        "weui":true
      }
}

案例代码

weui.json

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon",
    "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar",
    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
  },
  "navigationStyle":"custom"
}

weui.wxml

<mp-navigation-bar
    background="#f00"
    color="#fff"
    back="{{ false }}"
>
    <!-- slot 设置为left -->
    <view slot="left" class="back">
        <text bindtap="backIndex">首页</text>|
        <text bindtap="backPrev">返回</text>
    </view>

    <!-- slot 设置为center -->
    <view slot="center">
        <mp-icon color="#fff" icon="search" size="20"></mp-icon>
        <text>订单查询</text>
    </view>
</mp-navigation-bar>
<mp-tabbar bindchange="tabbarChange" list="{{ lists }}" class="mptabbar"></mp-tabbar>

weui.js

Page({
    data:{
        lists:[
            {
                "text":"订单查询",
                "iconPath":"/static/index.png",
                "selectedIconPath":"/static/indexFull.png",
                "badge":"3"
            },
            {
                "text":"收货地址",
                "iconPath":"/static/index.png",
                "selectedIconPath":"/static/indexFull.png"
            },
            {
                "text":"会员等级",
                "iconPath":"/static/index.png",
                "selectedIconPath":"/static/indexFull.png"
            },
            {
                "text":"客服帮助",
                "iconPath":"/static/index.png",
                "selectedIconPath":"/static/indexFull.png"
            },
        ]
    },
    backIndex(){
        wx.switchTab({
          url: '../index/index',
        })
    },
    backPrev(){
        wx.navigateBack({
            delta:1
        })
    },
    tabbarChange(e){
        console.log(e)
        switch(e.detail.index){
            case  0:

            break;
            case  1:

            break;
            // 。。。。
        }
    }
})

云开发

概述

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。提供了包括数据库、云函数、存储等基础能力;

基础能力概述

传统模式开发：
	1.铺小程序项目页面   （可以直接在微信开发者工具上传，提交审核）
	2.有自己的服务端（php+mysql）
	3.购买域名，购买服务器
云开发：
	1.铺小程序项目页面 
		+api调用即可
	2.存储空间 + 数据库等
	
	
	mysql   关系型数据库（结构型）
		数据库 + 数据表 （多个字段）
	
	mongodb  非关系型数据库  （json）

新建云开发模板

开通云开发、创建环境

初始化

// app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        env: 'sad12121-7g3xb0ym12ae2914',
        traceUser: true,
      });
    }

    this.globalData = {};
  }
});