一.小程序中展示弹窗
1.1 Toast title icon duration...皆可自定义
showToastEvent(){
wx.showToast({
title: '你好Buliceli',
duration: 2000,
icon:'loading',
image: '自定义图标的本地路径',
mask:true
})
}
1.2 Modal
wx.showModal({
title:'我是标题',
content:'我是内容',
cancelColor: 'blue',
success: function(res){
console.log(res)
},
showCancel: true,//展示取消
cancelText: '不确定' //修改取消文字
})
1.3 Loading 需要手动取消 用于网络请求
wx.showLoading({
title: '加载中...',
mask:true
})
setTimeout(() => {
wx.hideLoading({
success: (res) => {},
})
}, 1000);
1.4 ActionSheet
wx.showActionSheet({
itemList: ['相册','拍照'],
itemColor:'red',
success:function(res){
}
})
二.页面分享
2.1 右上角自带的分享
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return{
title:'你好啊',
path: '/pages/home/home',
imageUrl:'https://images.pexels.com/photos/1391498/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'
}
},
2.2 分享Button
"share">分享
三.小程序的登录流程
3.1 三个角色 小程序开发者 公司服务器 微信的服务器
- 小程序开发者 通过wx.login()接口取腾讯的服务器获取success回调里的code
- 小程序开发者 通过wx.request()的方式把获取到的code发送给公司服务器
- 公司服务器 拿着code + (AppId + AppSecret)[微信公众平台|小程序|开发|开发设置 处获取] 去微信服务器获取session_key + openid等 (此时的openId是微信的唯一标识)
- 公司服务器 一般 返回token给小程序开发者 小程序开发者把token保存到storage中
- 小程序开发者判断storage中的token是否过期 过期重新获取 没过期 携带token请求具体的业务数据
对于小程序开发者来说 关心的事情有四件
1.调用wx.login向微信获取code
2.调用wx.request发送code到公司服务器(公司服务器会返回一个登录态的标识,比如token)
3.将登录态的标识token进行存储 以便下次使用
4.请求需要登录态标识的接口时 携带token
//app.js
const TOKEN = 'token'
App({
globalData: {
token: ''
},
onLaunch: function () {
//先从缓存中取出token
const token =
wx.getStorageSync(TOKEN)
// 判断token是否有值
if (token && token.length !== 0)
{
//已经有token 判断token是否过期
this.check_token(token)
} else {
// 没有token 登录操作
this.login()
}
},
check_token(token) {
wx.request({
url: 'http://123.呵呵:3000/auth',
method: 'post',
header: {
token
},
success: (res) => {
console.log(res)
if (!res.data.errorCode) {
this.globalData.token = token
} else {
this.login()
}
}
})
},
login() {
wx.login({
timeout: 2000,
success: (res) => {
//code只有5分钟的有效期
console.log(res)
const code = res.code;
// 2.将code发送给公司服务器
wx.request({
url:
'http://123.呵呵:3000/login',
method: 'post',
data: {
code
},
success: (res) => {
console.log(res)
// 取出token
const token = res.data.token
// 将token保存到globalData中
this.globalData.token =
token
// 进行本地存储
wx.setStorageSync
(TOKEN, token)
}
})
},
fail: function (error) {
console.log(error)
}
})
}
其实在iOS中的微信登录流程大致类似 比如在iOS中
第一步 iOS开发者先去微信服务器拿code
- (void)wechatBtnClick
{
if ([WXApi isWXAppInstalled] &&
[WXApi isWXAppSupportApi])
{
//构造SendAuthReq结构体
SendAuthReq* req =
[[SendAuthReq alloc]init];
req.scope = @"snsapi_userinfo";
req.state =
@"com.mintelcn.syorallearning";
//第三方向微信终端
发送一个SendAuthReq消息结构
[WXApi sendReq:req
completion:^(BOOL success)
{
LDLog(@"success = %d",success);
}];
}else
{
[MBProgressHUD showMessage:
@"您的设备尚未安装微信,请安装后重试"];
}
}
@interface AppDelegate()
...
-(void) onResp:(BaseResp*)resp
{if([resp isKindOfClass:
[SendAuthResp class]])
{
SendAuthResp *response =
(SendAuthResp *)resp;
switch (response.errCode) {case WXSuccess:/** LDLog(@"微信授权成功");
[[NSNotificationCenter defaultCenter]
postNotificationName:
WechatAuthorizationSucceededNoti
object:@{@"code": response.code}];break;case WXErrCodeCommon:/** break;case WXErrCodeUserCancel:/** break;case WXErrCodeSentFail:/** break;case WXErrCodeAuthDeny:/** break;case WXErrCodeUnsupport:/** break;
}
}
}
第二步 iOS开发者将code发给公司服务器 公司服务器返回token给iOS开发者
- (void)wechatEvent:(NSNotification *)
noti
{
[TFLoadingView showFromView:self];
NSString * code = noti.object[@"code"];
[BaseClient httpType:POST
andURL:Post_Wechat_Authorization_Api
andParam:@{@"code" : code}
andSuccessBlock:^(NSURL *URL,
NSDictionary * data)
{
[TFLoadingView hiddleForView:self];
LDLog(@"%@",data.mj_JSONString);
/*
"is_bind":该微信是否绑定了用户
(绑定代表微信登录成功)
"wechar_info_id":微信信息id
"key":token值(仅当is_bind=True时有值)
*/
if ([data[@"code"] intValue] == 200)
{
NSString * token =
data[@"data"][@"key"];
BOOL is_bind =
[data[@"data"][@"is_bind"] boolValue];
if (token.length == 0
|| is_bind == NO)
{
NSInteger wechat_info_id =
[data[@"data"][@"wechar_info_id"]
integerValue];
if (self.delegate &&
[self.delegate respondsToSelector:
@selector
(openingCoursesEvent:wechat_info_id:)])
{
[self.delegate
openingCoursesEvent:-999
wechat_info_id:wechat_info_id
];
}
}else{
NSString * token =
data[@"data"][@"key"];
[TFUserTool shareUser].userInfo
= [UserInfoModel new];
[TFUserTool shareUser].userInfo.token
= token;
[TFUserTool saveUser];
[self getUserInfo:token];
}
}
} andFailBlock:
^(NSURL *URL, NSError *error)
{
[TFLoadingView hiddleForView:self];
[MBProgressHUD showMessage:@"微信授权失败"];
}];
}
四.小程序的界面跳转 两种方式 navigator组件和wx的api
4.1 navigator组件
url="/pages/detail/detail"
>
跳到详情页
"navigateBack">
返回
open-type="navigateBack"
delta="2">
返回
url="/pages/detail/detail"
open-type="reLaunch"
>
跳到详情页
4.2 页面跳转时的数据传递
4.2.1 正向传值
url="/pages/detail/detail?
name=buliceli
&age=18
&height=1.88"
>
跳到详情页
// pages/detail/detail.js
Page({
....
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
//{name: "buliceli",
age: "18",
height: "1.88"
}
}
4.2.2 反向传值
// pages/detail/detail.js
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('页面退出');
//1. 获取首页的页面对象
//获取当前所有的页面
const pages = getCurrentPages()
console.log(pages)
const home = pages[pages.length - 2]
//调用页面对象的一些方法
home.setData({
title: '呵呵呵'
})
},
4.3 通过代码跳转
4.3.1
bindtap="handlePushDetail"
>
跳到详情页
handlePushDetail(){
wx.navigateTo({
url:
'/pages/detail/detail?title=hehe',
})
}
handleBackHome(){
wx.navigateBack({
delta: 1
})
}