微信小程序高阶
前言:
小程序中最强大的是 s内置API,可以支持在小程序中快速调用软件的部分功能,可以快速满足一些业务需求,如网络请求、支付、数据缓存、数据分析、文件操作、位置获取、手机硬件调用等。文档链接: developers . weixin . . com/mini program/d
1.网络请求 wx.request()
类似于axios发送网络请求并获取后端数据。wx.r,需要配置服务器白名单才能正确做出请求,不会被拦截。配置方法:请在 "小程序背景-开发-开发设置-服务器域名 "https://开发者. weixin . . com/mini program/d: ; ,//只是一个例子,不是真正的接口地址。
data: {
x: ; ,
y: ;
},
h: {
内容类型 : ;应用程序/JSON ;//默认值。
},
成功(res) {
consol:{
},
g: ; 129 . 211 . 169 . 131 : 6368/getfractionshop ;,//只是一个例子,不是真正的接口地址。
成功(res) {
consol
2.网络请求的企业级三层封装
调用接口时,它通常需要被封装。为了使用2.1 前置,提取公共服务器url utils/common.js
出口constbas: 6368 ;更方便。2.1 第一层 utils/request.js
从 。/common ;//用承诺封装请求请求
export const r:BaseUrl网址,
方法,
数据,
成功(res){
consol
2.2 第二层 接口对应层 /api/users.js
import {request}来自 ../utils/request ;//获取
export const getList =()= request( ;/getFractionShop ;, 获取 );
//发布
export const XXX =(data)= r
2.3 第三层 接口调用层
页面的js文件中。// ind:{
},
getData(){
getList()。然后(res={
consol
3.本地存储
4.小程序定位+腾讯地图 逆地址解析api 获取城市
注册腾讯位置服务-开发者账号-我的应用-新建应用——【注意:创建应用时需要传入小程序的appId(公众平台应用并绑定当前小程序)】创建应用后,创建keyecho,43-@.com[必填:webServiceAPI,填写您的applet的appId小程序使用wx.getLocation()获取当前用户的经纬度信息。
获取当前用户的经纬度后,调用逆向地址解析API【通过经纬度获取地址数据】async getCity(){
let location = await wx . get location();
let options tr = ` location = $ { location . latitude },$ { location . longitude } key = 2u 5bz-3c 66v-ffpp 7-U: ` : ;获取 ,
成功(res){
consol
5.获取用户信息 getUserProfile
小程序获取用户信息-调整登录规则公告: developers . weixin . . com/community/development/doc/000 CCA CFA 20 ce 88 df 04 CB 468 BC 52801 button bind tap = "getuserprofile "点击获取信息/按钮。getUserProfile(e) {
//建议使用wx.getUserProfile获取用户信息。开发者每次通过这个接口获取用户个人信息,用户都必须确认。
//开发者应妥善保管用户快速填写的头像昵称,避免重复弹出。
wx.getUserProfile({
desc:(R
6.用户 登录
6.1 登录流程图
img
6.2 准备工作:
在后台的小程序(开发管理-开发设置),搞定。AppID和AppSecret密钥交给后端,【说:原则上前端可以 t存储app secr6.3 前端拿到 code 发送给后端,后端返回openid 和seesionkey
后端接口地址: 115 . 159 . 153 . 85 : 5002/g:小程序appid AppSecr:小程序管理平台秘钥cod:login返回值utils/common.js导出常数WXAPP = {
appid: ;wx 5484 e 4642189 d850 ;,
appsecr: ;a 75403 a 4491 DC 2 cf 67d 81 aecc 010 bb 88 ;
}
Page.js
onload(){
wx.login({
succ:(R:WXAPP.AppID,
appsecr: wxapp . app secret,
cod:res.cod: ; 115 . 159 . 153 . 85 : 5002/g: ;邮政和邮政。;,
数据,
成功(res){
consol: "5mBqgkPgAkyLW623B3mfHg = = "、op: "oxqa _ 5FE _ zaqkderv 3-37 ckuvvbg "}
}
})
},
})
}
8.相机扫码
//允许扫描相机和相册中的代码。wx.scanCode({
成功(res) {
Console.log(res.result) //通过扫码获得的数据。
}
})
//只允许从相机扫描代码。
wx .扫描代码({
onlyFromCam:没错,
成功(res) {
consol
9.选择联系人
button bind tap = "选择联系人选择一个联系人/按钮。选择联系人(){
wx.chooseContact({
succ:函数(res) {
console . log(RES ;成功回拨 )
},
失败(res) {
console . log(RES ;错误回调 )
},
完成(剩余){
consol
10.拨打
button bindlonpress = "告诉 "数据号码= "1364824277213648242772/按钮告诉(e){
//提示呼叫号码或将号码添加到通讯簿中。
wx.showActionSh:[ ; , 添加联系人 ],
succ: function(RES){
if(res.tapIndex===0){
console . log(e . target);
//呼叫号码
wx.makePhoneCall({
phon:电子目标数据集号码
})
}else if(res.tapIndex==1){
//添加到通讯簿
wx.addPhoneContact({
first nam: ;测试与测试。;,//联系人姓名
Mobil:
4. 小程序分享
developers . weixin . . com/mini program/dev/reference/API/page . html # onShareAppMessage-Object-ob国民住宅发送给朋友/* *
*用户点击右上角分享。
*/
onShareAppMessage() {
const Promis: ;源代码1
})
}, 2000)
})
返回{
titl: ;源代码和。;,
path: ;/pag
5.支付
6.分包上线
文章来源:丸子建站
文章标题:微信小程序高阶
https://www.wanzijz.com/view/1537.html