微信小程序中用到的技术点总结
1、对于页面及头部的设置位于app.js
"window": {
"backgroundTextStyle": "light",//背景文本风格
"navigationBarBackgroundColor": "#5AC6D3",//头部背景色
"navigationBarTitleText": "饿了吗",//头部标题
"navigationBarTextStyle": "black",//文本颜色
"enablePullDownRefresh": true,//下拉刷新
"backgroundColor": "#5ac6d3"//窗体背景颜色,即窗体下拉刷新或上拉加载时露出的背景
},
2、页面底部导航的设置
"tabBar": {
"color": "#6e6d6b",
"selectedColor": "#e64340",
"borderStyle": "white",
"backgroundColor": "#fff",//
"list": [
{
"pagePath": "pages/home/home",//页面地址
"iconPath": "images/nav/home-off.png",//图标地址
"selectedIconPath": "images/nav/home-on.png",//选中图标的地址
"text": "首页"
},
{
"pagePath": "pages/login/login",//页面地址
"iconPath": "images/nav/my-off.png",//图标地址
"selectedIconPath": "images/nav/my-on.png",//选中图标的地址
"text": "我的"
}
]
},
3、小程序使用组件
在本页面的index.json文件
"usingComponents": {
"loading": "/components/load/load"
}
在index.wxml文件
<view class='{{islogo==1?"hidden":""}}'>
<loading></loading>
</view>
4、使用小程序自带的页面加载弹窗
wx.showToast({
title: '成功',
icon: 'loading',
duration: 2000
})
注意
wx.showLoading 和 wx.showToast 同时只能显示一个
wx.showLoading 应与 wx.hideLoading 配对使用
小程序地址
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
5、小程序的Storage
wx.setStorage({
key: 'name',
data: {}
});
获取时
let getdate = wx.getStorageSync("name");
6、微信数据请求
wx.request({
url: 'test.php', //请求地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
7、设置本页面的头部标题
wx.setNavigationBarTitle({
title: '酒店'//页面标题为路由参数
})
8、获取微信的登陆授权并且存进Storage
wx.login({
success: function(res) {
if (res.code) {
wx.getUserInfo({
withCredentials: true,
success: function(res_user) {
that.setData({
encryptedData: res_user.encryptedData,
iv: res_user.iv,
nickName: res_user.userInfo.nickName,
avatarUrl: res_user.userInfo.avatarUrl,
})
wx.setStorage({
key: 'userinfo',
data: {
encryptedData: res_user.encryptedData,
iv: res_user.iv,
nickName: res_user.userInfo.nickName,
avatarUrl: res_user.userInfo.avatarUrl,
}
});
wx.request({
//后台接口地址
url: app.globalData.url + '/user',
data: {
code: res.code,
encryptedData: res_user.encryptedData,
iv: res_user.iv
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
wx.setStorage({
key: 'openId',
data: {
"openid": res.data.user_info.openId
}
});
if (res.data.success) {
wx.setStorage({
key: 'USER_ID',
data: {
user_id: res.data.user_id,
parent: res.data.parent
}
});
that.setData({
isuser: true,
openid: res.data.user_info.openId
})
that.freashUser();
} else {
that.setData({
openid: res.data.user_info.openId
})
//更具需求跳转页面
wx.navigateTo({
url: '/pages/phone/phone?openid=' + that.data.openid + "&name=" + res.data.user_info.nickName + "&unionId=" + res.data.user_info.unionId,
})
}
}
})
},
fail: function() {
}
})
}
}
})
9、点击分享给朋友
<button class="shareBtn" open-type="share">微信好友</button>//设置为optn-type确保是通过按钮点击分享
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
return {
title: `${this.data.hotelname}-¥${this.data.minPrice}起`,//分享的头部数据
path: `pages/hoteldetail/hoteldetail`,//分享地址
imageUrl: this.data.res_image,//分享标题下面的图片,不设置则为自动截图
success: function(res) {
// 转发成功
console.log("转发成功:" + JSON.stringify(res));
var shareTickets = res.shareTickets;
if (shareTickets.length == 0) {
return false;
}
//可以获取群组信息
wx.getShareInfo({
shareTicket: shareTickets[0],
success: function(res) {
console.log(res)
}
})
}
}
},