ios微信组件跳转_微信小程序_下篇(LD)

一.小程序中展示弹窗

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 三个角色 小程序开发者 公司服务器 微信的服务器

1. 小程序开发者 通过wx.login()接口取腾讯的服务器获取success回调里的code
2. 小程序开发者 通过wx.request()的方式把获取到的code发送给公司服务器
3. 公司服务器 拿着code + (AppId + AppSecret)[微信公众平台|小程序|开发|开发设置 处获取] 去微信服务器获取session_key + openid等 (此时的openId是微信的唯一标识)
4. 公司服务器 一般 返回token给小程序开发者 小程序开发者把token保存到storage中
5. 小程序开发者判断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
   })
}