澳门新萄京:小程序开荒,数据缓存
分类:澳门新萄京最大平台

网页程序迁移至微信小程序web-view详解

2018/08/02 · JavaScript · 小程序

原文出处: NeoPasser   

小程序现在越来越流行,但是公司的很多项目都是用网页写的,小程序语法不兼容原生网页,使得旧有项目迁移至小程序代价很高。

小程序之前开放了webview功能,可以说是网页应用的一大福音了,但是微信的webview有一些坑,这篇文章就是列举一下我在开发过程中遇到的一些问题以及我找到的一些解决方案。

近期,微信官方修改了 getUserInfo、authorize等 接口,无法直接弹出授权窗口,这让我们以前一开始就获取用户信息完成登录的功能全部失效,新规定是第一次获取用户信息只能通过 button 去触发,那么有什么解决方案呢?

js引入:

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用.

直接放到需要显示授权页的onload里

onLoad: function (options) {

      //登录授权部分逻辑

      var that = this

      var title = arguments[2] ? arguments[2] : '授权登录失败,部分功能将不能使用,是否重新登录?';//当用户取消授权登录时,弹出的确认框文案

      var user = wx.getStorageSync('user');//登录过后,用户信息会缓存

      console.log(user)

      if (!user) {

        console.log(!user)

        // 弹出授权页

        wx.login({

          success: function (res) {

            console.log('弹出授权页成功')

            var code = res.code;

            // 是否允许授权

            wx.getUserInfo({

              success: function (res) { //用户点击 “同意”

                console.log('允许授权:')

                wx.setStorageSync("user", res)//本地缓存user数据  下次打开不需要登录

                var app = getApp()

                app.globalData.user = res//在当前的app对象中缓存user数据

                // 同步信息到页面

                that.setData({

                  userInfo: app.globalData.user.userInfo

                })         

              },

              fail: function (res) { //用户点击 “拒绝”

                console.log('拒绝授权')

                wx.showModal({  //自定义弹框显示是否重新同意授权

                  title: '提示',

                  content: title,

                  showCancel: true,

                  cancelText: "否",

                  confirmText: "是",

                  success: function (res) { //调用模态弹窗成功

                    if (res.confirm) { //如果用户重新同意了授权登录

                      if (wx.openSetting) {  //当前微信的版本 ,是否支持openSetting,调出小程序设置页面,开启授权

                        wx.openSetting({

                          success: (res) => {

                            if (res.authSetting["scope.userInfo"]) {

                              console.log('用户重新同意授权')

                              wx.getUserInfo({  //跟上面的wx.getUserInfo处理逻辑一样

                                success: function (res) {

                                    wx.setStorageSync("user", res)                           

                                    var app = getApp()

                                    app.globalData.user = res

                                    that.setData({

                                      userInfo: app.globalData.user.userInfo

                                    })

                                }

                              })

                            } else {  //还是拒绝

                              console.log('用户还是拒绝授权,登陆失败,此处应该变换页面')

                            }

                          },

                          fail: function () {  //调用失败,授权登录不成功

                            console.log('登陆失败')

                          }

                        })

                      } else {

                        console.log('当前用户微信版本不支持openSetting,登陆失败')

                      }

                    }else{

                      //可以在这里添加一个确认授权的页面,如果不想加的话,就需要每次跳转到这个页面都检测一遍是否授权,那么这个函数就应该放到其他钩子函数里了

                      console.log('用户第二次拒绝了授权,在此处变换页面')

                    }

                  }

                })

              }

            })

          }

        })

      } else {//如果缓存中已经存在user  那就是已经登录过

        var app = getApp()

        app.globalData.user = user

      } 

  }

也可以把它封装成一个函数,用的时候调用就可以了

遇到的问题

  1. openid登录问题
  2. webview动态src
  3. 支付功能
  4. 分享功能
  5. 扫描普通二维码跳转特定页面
  6. 返回按钮缺失问题

我的思路是一进入小程序的时候,立马去调用登录接口(wx.login,之前的代码不用变)并在回调中去调用获取用户信息接口(wx.getUserInfo),这时候就需要特别注意了,需要会wx.getUserInfo的获取失败钩子进行判断,如果失败,那么直接跳转去登录页面(登录页面中可以实现按钮登录);如果成功,继续后续逻辑代码。

const util =require('../../utils/util.js')

现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子.

openid登录问题

微信webview的使用方法很简单,只要如下设置src就可以展示具体的网站了。

<!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src=";

1
2
3
<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

微信环境里的很多网页都是用页面要实现网站的登录功能,只要把登录的信息,比如openid或者其他信息拼接到src里就好了。

这里有个问题,公众号的账号体系一般是以openid来判断唯一性的,小程序是可以获取openid的,但是小程序的openid和原公众号之类的openid是不一样的,需要将原先的openid账号体系升级为unionid账号体系。

以下是微信对unionid的介绍

获取用户基本信息(UnionID机制)

在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的。对于不同公众号,同一用户的openid不同)。公众号可通过本接口来根据OpenID获取用户基本信息,包括昵称、头像、性别、所在城市、语言和关注时间。

请注意,如果开发者有在多个公众号,或在公众号、移动应用之间统一用户帐号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满足上述需求。

UnionID机制说明:

开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

做完以上步骤,就可以调用小程序api wx.getUserInfo() 来获取用户信息了,此步骤需要进行后台信息解密过程,在此就不再赘述,结合小程序api文档操作就好。

获取到unioid之后,将unionid信息拼接到src就可以进行网页登录操作了(前提是网页可以用跳转链接的方式登录,类似公众号页面获取openid的形式)。

具体代码如下:

获取全局对象和方法:

先上GIF:

webview动态src

微信的webview有个坑的地方,不会动态的监听src的变化,这就造成了一个问题,要通过改变src实现页面跳转就不可以了。
我尝试了一些方法之后,找到了一个解决方案:

微信webview在页面load的时候会加载一次webview,我们就利用这个特性来实现动态src问题。

  1. 首先把要跳转的链接信息设置成全局变量,要改变src的时候,先把要src以’?‘拆分为链接和参数两部分,存入全局函数,再调用onLoad就可以实现webview刷新了。
  2. 页面跳转时,我们也需要src的动态刷新,所以要把链接信息存入全局函数;页面跳转时,onShow函数会被调用,这时候再调用一次onLoad就可以了。

data: { url: '', loaded: false } // 小程序js里的onLoad函数可以写成这样 onLoad: function () { this.setData({ url: getApp().globalData.urlToken '?' getApp().globalData.urlData }) }, changUrl: function () { getApp().globalData.urlToken = '' getApp().globalData.urlToken = 'a=1&b=2' // 直接调用onLoad,就会实现src的刷新 this.onLoad() }, onShow: function () { if (!this.data.loaded) { // 第一次不运行 this.setData({ loaded: true }) return } // 直接调用onLoad,就会实现src的刷新 this.onLoad() } // wxml可以写成这样 <web-view src="{{url}}"></web-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
data: {
    url: '',
    loaded: false
}
// 小程序js里的onLoad函数可以写成这样
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken '?'   getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = 'https://www.example.com'
    getApp().globalData.urlToken = 'a=1&b=2'
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不运行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
  }
 
// wxml可以写成这样
<web-view src="{{url}}"></web-view>

const Request = require("/utils/request"); //引入封装的http拦截器

App({

onLaunch: function {

this.authorize(options.query); // 直接授权登录(options.query 参数与分享配置有关,后续文章介绍)

},

authorize: function {

let self = this;

share = share || {};

wx.login({

success: function {

wx.getUserInfo({

success: function {

Request.post("/api/xcxWxLogin", {

code: res.code,

encryptedData: resp.encryptedData,

iv: resp.iv

}).then(({

data: response

}) => {

if (response.code !== 0) {

wx.showToast({

title: response.msg,

icon: "none"

});

} else {

// 保存sessionid ,每次请求都会在拦截器中自动添加到header中

澳门新萄京:小程序开荒,数据缓存。wx.setStorageSync("UserSessionId", response.data.sessionId);

self.globalData.sessionid = response.data.sessionId;

//todo 后续逻辑代码

}

});

},

fail: function {

//重点,如果获取失败直接跳转

let timer = setInterval => {

let pages = getCurrentPages();

if (pages.length > 0) {

clearInterval;

let currentPage = pages[pages.length - 1];

if (currentPage.route === "pages/user/userbind/userbind") {

return true;

}

try {

wx.setStorageSync("SYS_PREVIOUSPAGE", currentPage);

setTimeout => {

wx.redirectTo({

url: "/pages/login/login"

});

}, 300);

} catch {

wx.redirectTo({

url: "/pages/login/login"

});

}

}

}, 200);

}

});

}

});

}

})

const app = getApp()

澳门新萄京 1

支付功能

webview里面可以通过jssdk来实现一些小程序功能,但不能直接调用小程序的支付功能,这时候我们就需要转变一下策略了:

  1. 在网页里引入微信jssdk
  2. 在网页需要发起支付的地方,调用跳转页面的接口,控制小程序跳转到小程序的支付页面(这个要在小程序里单独写的),跳转的时候,需要把订单的一些信息都拼接到链接里,订单信息由后台返回,需要通过微信支付系统的统一下单接口,具体参看支付文档。
  3. 跳转到小程序支付页面后,由小程序页面发起支付,支付完成后跳转回webview页面,通过之前设置的动态src,控制webview跳转到特定的页面。

JavaScript

// 网页引入jssdk // 网页发起支付 wx.miniProgram.navigateTo({ // payData由后台返回,主要是需要统一下单平台的prepay_id url: '../pay/index?data=' encodeURIComponent(JSON.stringify(payData)) }) // 微信支付页面 onLoad: function (option) { let page = this try { let data = JSON.parse(option.data) if (!data || !data.prepay_id) { console.error('支付参数错误,请稍后重试', data) } wx.requestPayment({ timeStamp: '' data.timestamp, nonceStr: data.nonceStr, package: 'prepay_id=' data.prepay_id, paySign: data.paySign, signType: data.signType, success: function (res) { getApp().globalData.urlToken = `paySuccess.html` // 支付成功 getApp().globalData.urlData = 'data=paySuccessData' wx.navigateTo({ url: '/page/home/index', }) }, fail: function (res) { getApp().globalData.urlToken = `payError.html` // 支付失败 getApp().globalData.urlData = 'data=payErrorData' wx.navigateTo({ url: '/page/home/index', }) }, complete: function (res) { } }) } catch (e) { console.error('支付错误', e) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 网页引入jssdk
 
// 网页发起支付
wx.miniProgram.navigateTo({
    // payData由后台返回,主要是需要统一下单平台的prepay_id
    url: '../pay/index?data=' encodeURIComponent(JSON.stringify(payData))
})
// 微信支付页面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error('支付参数错误,请稍后重试', data)
      }
      wx.requestPayment({
        timeStamp: '' data.timestamp,
        nonceStr: data.nonceStr,
        package: 'prepay_id=' data.prepay_id,
        paySign: data.paySign,
        signType: data.signType,
        success: function (res) {
          getApp().globalData.urlToken = `paySuccess.html`
          // 支付成功
          getApp().globalData.urlData = 'data=paySuccessData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        fail: function (res) {
          getApp().globalData.urlToken = `payError.html`
          // 支付失败
          getApp().globalData.urlData = 'data=payErrorData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        complete: function (res) {
        }
      })
    } catch (e) {
      console.error('支付错误', e)
    }
  }

获取用户信息成功的回调具体得看业务,获取失败的回调主要是加定时器去判断页面是否加载完成,加载完成后再保存当前页面路径(用于登录成功后跳转),最后跳转到一个带有登录按钮的页面(不在app.js中完成登录,而是在login.js中完成登录,第二次打开就静默授权了)

事件:

1.APP.js

分享功能

小程序直接分享的webview所在的页面,如果需要加上页面参数,那我们就需要处理一下了。

  1. webview内是不能直接发起分享的,需要先用wx.miniProgram.postMessage接口,把需要分享的信息,推送给小程序;推送给小程序的信息不是实时处理的,而是用户点击了分享按钮之后,小程序才回去读取的,这就要求每个需要分享的页面再进入的时候就发起wx.miniProgram.postMessage推送分享信息给小程序。
  2. 小程序页面通过bindmessage绑定的函数读取post信息,分享的信息会是一个列表,我们取最后一个分享就好,把分享信息处理好,存到data里面以便下一步onShareAppMessage调用。
  3. 用户点击分享时,会触发onShareAppMessage函数,在里面设置好对应的分享信息就好了。
  4. onload函数有一个option参数的,可以读取页面加载时url里带的参数,这时要对原先的onload函数进行改造,实现从option里读取链接信息。

JavaScript

// 网页wx.miniProgram.postMessage wx.miniProgram.postMessage({ data: { link: shareInfo.link, title: shareInfo.title, imgUrl: shareInfo.imgUrl, desc: shareInfo.desc } }) // 小程序index wxml设置 <web-view src="{{url}}" bindmessage="bindGetMsg"></web-view> // 小程序index js bindGetMsg: function (e) { if (!e.detail) { return } let list = e.detail.data if (!list || list.length === 0) { return } let info = list[list.length - 1] if (!info.link) { console.error('分享信息错误', list) return } let tokens = info.link.split('?') this.setData({ shareInfo: { title: info.title, imageUrl: info.imgUrl, path: `/page/index/index?urlData=${encodeURIComponent(tokens[1]澳门新萄京,)}&urlToken=${tokens[0]}` } }) }, onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } let that = this return { title: that.data.shareInfo.title, path: that.data.shareInfo.path, imageUrl: that.data.shareInfo.imageUrl, success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }, onLoad: function (option) { if (option.urlToken) { getApp().globalData.urlToken = option.urlToken } if (option.urlData) { getApp().globalData.urlData = option.urlData } this.setData({ url: getApp().globalData.urlToken '?'

  • getApp().globalData.urlData }) },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 网页wx.miniProgram.postMessage
wx.miniProgram.postMessage({
  data: {
    link: shareInfo.link,
    title: shareInfo.title,
    imgUrl: shareInfo.imgUrl,
    desc: shareInfo.desc
  }
})
// 小程序index wxml设置
<web-view src="{{url}}" bindmessage="bindGetMsg"></web-view>
// 小程序index js
bindGetMsg: function (e) {
    if (!e.detail) {
      return
    }
    let list = e.detail.data
    if (!list || list.length === 0) {
      return
    }
    let info = list[list.length - 1]
    if (!info.link) {
      console.error('分享信息错误', list)
      return
    }
    let tokens = info.link.split('?')
    this.setData({
      shareInfo: {
        title: info.title,
        imageUrl: info.imgUrl,
        path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
      }
    })
},
onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    let that = this
    return {
      title: that.data.shareInfo.title,
      path: that.data.shareInfo.path,
      imageUrl: that.data.shareInfo.imageUrl,
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
},
onLoad: function (option) {
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken '?'   getApp().globalData.urlData
    })
},

澳门新萄京 2login页面,点击按钮完成登录

1、key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。

我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp();

扫描普通二维码跳转特定页面

除了分享功能之外,小程序还可以通过配置,实现扫描普通二维码跳转特定页面的功能。

以下是微信对此功能的介绍

为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。

功能介绍

普通链接二维码,是指开发者使用工具对网页链接进行编码后生成的二维码。

线下商户可不需更换线下二维码,在小程序后台完成配置后,即可在用户扫描普通链接二维码时打开小程序,使用小程序的功能。
对于普通链接二维码,目前支持使用微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码规则

根据二维码跳转规则,开发者需要填写需要跳转小程序的二维码规则。要求如下:

  1. 二维码规则的域名须通过ICP备案的验证。
  2. 支持http、https、ftp开头的链接(如:、)。
  3. 一个小程序帐号可配置不多于10个二维码前缀规则。

前缀占用规则

开发者可选择是否占用符合二维码匹配规则的所有子规则。如选择占用,则其他帐号不可申请使用满足该前缀匹配规则的其他子规则。

如:若开发者A配置二维码规则:,并选择“占用所有子规则“,其他开发者将不可以配置满足前缀匹配的子规则如。

我推荐的方式

webview实现方式

  1. 设置跳转功能小程序后台就可以设置,链接是分为四部分,路https://www.example.com/wxmin…。

    https://www.example.com 域名
    /wxmini/ 小程序前置规则,需要在服务器上建一个文件夹,并且把验证文件放在文件夹线
    home.html 需要跳转的网页页面
    a=1 跳转页面的参数
  2. 对onload函数再进行处理,实现普通二维码跳转。

JavaScript

// 对index onLoad在进行处理 onLoad: function (option) { this.resetOption(option) if (option.urlToken) { getApp().globalData.urlToken = option.urlToken } if (option.urlData) { getApp().globalData.urlData = option.urlData } this.setData({ url: getApp().globalData.urlToken '?' getApp().globalData.urlData }) }, resetOption: function (option) { if (!option) { return } if (option.q) { option.q = decodeURIComponent(option.q) if (option.q.indexOf('') == -1) { return } let tmp = option.q.replace('/wxmini', '') let tmps = tmp.split('?') option.urlToken = tmps[0] option.urlData = tmps[1] } else { option.urlData = decodeURIComponent(option.urlData) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 对index onLoad在进行处理
onLoad: function (option) {
    this.resetOption(option)
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken '?'   getApp().globalData.urlData
    })
},
resetOption: function (option) {
    if (!option) {
      return
    }
    if (option.q) {
      option.q = decodeURIComponent(option.q)
      if (option.q.indexOf('https://www.example.com/wxmini/') == -1) {
        return
      }
      let tmp = option.q.replace('/wxmini', '')
      let tmps = tmp.split('?')
      option.urlToken = tmps[0]
      option.urlData = tmps[1]
    } else {
      option.urlData = decodeURIComponent(option.urlData)
    }
}

下面介绍登录页面的逻辑代码:

跳转:

app上就可以拿到存在data中的参数.

返回按钮缺失问题

如果web页面是在第一个页面的话,这时候会有一个问题,小程序的返回按钮就没有了,webview无法使用微信的返回按钮了,这时候只要在webview页面前多加一个跳转页面就好了(第一个页面也可以设置成获取用户权限的页面,不过我感觉这样体验不好,也不是所有页面都要用户获取了权限才可以使用)

最终的页面层级

JavaScript

"pages": [ "page/index/index", // 首页,处理onload里的option内容,为了返回按钮设置的 "page/home/index", // webview所在的页面 "page/auth/index", // 获取用户权限的页面 "page/pay/index", // 支付页面 "page/error/index" // 错误信息页面 ],

1
2
3
4
5
6
7
"pages": [
    "page/index/index", // 首页,处理onload里的option内容,为了返回按钮设置的
    "page/home/index", // webview所在的页面
    "page/auth/index", // 获取用户权限的页面
    "page/pay/index", // 支付页面
    "page/error/index" // 错误信息页面
  ],

const Request = require("../../utils/request");

Page({

/**

* 页面的初始数据

*/

data: {

route: "/pages/home/home"

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function {

let self = this;

wx.getStorage({

key: "SYS_PREVIOUSPAGE",

success: function {

if (res.errMsg === "getStorage:ok") {

self.setData({

route: "/" res.data.route,

share: res.data.options

});

}

wx.removeStorage({

key: "SYS_PREVIOUSPAGE"

});

}

});

},

bindgetuserinfo: function {

if (e.detail.errMsg.indexOf > -1) {

wx.showModal({

title: '温馨提示',

content: '您未同意授权,系统无法检测您的身份,请允许授权',

});

} else {

getApp().authorize(this.data.share);

setTimeout => {

if (["/pages/home/home", "/pages/course/courselist/courselist", "/pages/course/publiclist/publiclist", "/pages/consult/consultlist/consultlist", "/pages/usercenter/usercenter"].indexOf(this.data.route) > -1) {

wx.switchTab({

url: this.data.route

});

} else {

wx.redirectTo({

url: this.data.route

});

}

}, 800);

}

}

})

页面和tabBar之间跳转:

 

参考链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获取方式

    2 赞 2 收藏 评论

澳门新萄京 3

login思路:一进入该页面,从缓存中把上一个页面拿出来(读取后需要清除该缓存),然后把登录按钮设置成获取用户信息类型,如

wx.switchTab({

2. wx.navigateTo({})中URL携带参数

澳门新萄京 4设置登录按钮

url:'../index/index'

demo中已经写出:

点击登录按钮后触发bindgetuserinfo回调,在回调中判断是否授权,没有点击确定授权就提示要授权,有授权就直接调用app.js的授权方法,最后重定向到上一个页面(是重定向不是返回,而且需要注意是不是导航页面

});

 wx.navigateTo({
      url: "../newpage/newpage?infofromindex=" this.data.infofromindex,
  });

澳门新萄京 5登录回调

页面之间跳转方法:

页面间传递参数的笔记

到这里,需要点击按钮才能触发登录已解决。

1、保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

 

PS:需要考虑的问题是,在其他页面,怎么才能知道是否已经完成登录了呢?

wx.navigateTo({   新页面会有返回按钮

3.wx.setStorage(OBJECT) 数据缓存

url:'../logs/logs?key=value&key2=value2' //传参

微信开发文档中的数据缓存方法:

,

①存储数据

success: function(res){

 try {
      wx.setStorageSync('infofrominput', this.data.infofrominput)
    } catch (e) {
 }

// success

②获取数据

},

  //获取
        wx.getStorage({
            key: 'infofrominput',
            success: function (res) {
                _this.setData({
                    infofromstorage: res.data,
                })
            }
        })

fail: function() {

 

// fail

key是本地缓存中的指定的 key,data是需要存储的内容.

},

详情见微信小程序开发文档:文档

complete: function() {

 

// complete

贴上代码:

}

1.index.js

})

 

2、wx.redirectTo(OBJECT)

[javascript] view plain copy

关闭当前页面,跳转到应用内的某个页面。

 

wx.redirectTo({   新页面不会有返回按钮

  1. //index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     info: app.data.info,  
  7.     infofromindex: '来自index.js的信息',  
  8.     infofrominput: ''  
  9.   },  
  10.   onLoad: function () {  
  11.   },  
  12.   //跳转到新页面  
  13.   gotonewpage: function () {  
  14.     wx.navigateTo({  
  15.       url: "../newpage/newpage?infofromindex="   this.data.infofromindex,  
  16.     });  
  17.   },  
  18.   //获取输入值  
  19.   searchInputEvent: function (e) {  
  20.     console.log(e.detail.value)  
  21.     this.setData({ infofrominput: e.detail.value })  
  22.   },  
  23.   //保存参数  
  24.   saveinput: function () {  
  25.     try {  
  26.       wx.setStorageSync('infofrominput', this.data.infofrominput)  
  27.     } catch (e) {  
  28.     }  
  29.   }  
  30. })  

url:'../index/index',

2.index.wxml

,

[html] view plain copy

success: function(res){

 

// success

  1. <!--index.wxml-->  
  2. <view>  
  3. <button style="background-color:#00ff00;margin:20rpx" bindtap="gotonewpage">跳转</button>  
  4. <input  style="background-color:#eee;margin:20rpx;height:80rpx" placeholder="请输入需要保存的参数" bindinput="searchInputEvent" />  
  5. <button style="background-color:#ff0000;margin:20rpx" bindtap="saveinput">存入Storage</button>  
  6. </view>  

},

3.newpage.js

fail: function() {

 

// fail

 

},

[javascript] view plain copy

complete: function() {

 

// complete

  1. //newpage.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.     data: {  
  6.         infofromapp: app.data.infofromapp,  
  7.         infofromindex: '',  
  8.         infofromstorage: '',  
  9.     },  
  10.     onLoad: function (options) {  
  11.         var _this = this;  
  12.         var infofromindex = options.infofromindex;  
  13.         this.setData({  
  14.             infofromindex: infofromindex  
  15.         })  
  16.         //获取  
  17.         wx.getStorage({  
  18.             key: 'infofrominput',  
  19.             success: function (res) {  
  20.                 _this.setData({  
  21.                     infofromstorage: res.data,  
  22.                 })  
  23.             }  
  24.         })  
  25.     }  
  26. })  

}

4.newpage.wxml

})

 

3、x.navigateBack(OBJECT)

 

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。如果 delta 大于现有页面数,则返回到首页。

[html] view plain copy

varpages = getCurrentPages()varnum = pages.length

 

navigateBack:function(){wx.navigateBack({

  1. <!--newpage.wxml-->  
  2. <view style="width:100%;margin:30rpx">infofromapp:{{infofromapp}}</view>  
  3. <view style="width:100%;margin:30rpx">infofromindex:{{infofromindex}}</view>  
  4. <view style="width:100%;margin:30rpx">infofromstorage:{{infofromstorage}}</view>  

delta: num

5.app.js

})

 

}

 

页面跳转也可直接用 url:

[javascript] view plain copy

<navigator url="../login/login?title=1111" >跳转到新页面</navigator>

 

<navigator url="../login/login?title=111" redirect>在当前页打开新页面</navigator>

  1. //app.js  
  2. App({  
  3.   data: {  
  4.     infofromapp: '来自APP.js的信息'  
  5.   },  
  6.   onLaunch: function () {  
  7.   
  8.   }  
  9. })  
  10.  

如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串然后传递,接收到之后要用JSON.parse()转换。.

取参:

Page({

onLoad:function(options) {

this.setData({       //用于给data中的变量赋值

title: options.key

})

}

})

数据绑定:

数据绑定使用 Mustache 语法(双大括号)将变量包起来。

内容:<view>{{message}}</view>

控制属性:<view wx:if="{{condition}}"></view>

关键字:<checkbox checked="{{false}}"></checkbox>

...

http:(微信公众号和小程序上线的话都必须是https请求,小程序接口不允许ip和端口号)

wx.request({ 

 url:'test.php',//仅为示例,并非真实的接口地址

data: { x:'', y:''},

 header: {'content-type':'application/json、默认值、或者、、'application/x-www-form-urlencoded'// }, 

method:'GET/POST',

 success:function(res){console.log(res.data) }

})

APP.JSON(tabBar)

{

"pages":[

"pages/index/index",

"pages/tucao/tucao",

"pages/center/center"

],

"window":{

"backgroundTextStyle":"",

"navigationBarBackgroundColor":"red",

"navigationBarTitleText":"一个标题而已",

"navigationBarTextStyle":"white"

},

"tabBar": {

"list": [{

"pagePath":"pages/index/index",

"text":"首页",

"iconPath":"public/menu-cd.png",

"selectedIconPath":"public/menu.png"

},{

"pagePath":"pages/tucao/tucao",

"text":"吐槽",

"iconPath":"public/hot-cd.png",

"selectedIconPath":"public/hot.png"

},{

"pagePath":"pages/center/center",

"text":"我的",

"iconPath":"public/center-cd.png",

"selectedIconPath":"public/center.png"

}],

"borderStyle":"white"

}

}

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京:小程序开荒,数据缓存

上一篇:的一次学习实践,的协议协商机制 下一篇:没有了
猜你喜欢
热门排行
精彩图文