澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站数据缓存,网页程序迁移至

2019-05-17 作者:澳门新萄京赌场网址   |   浏览(187)

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

2018/08/02 · JavaScript · 小程序

原稿出处: NeoPasser   

小程序未来越发流行,不过公司的浩大体系都以用网页写的,小程序语法不合营原生网页,使得旧有等级次序搬迁至小程序代价非常高。

小程序以前开放了webview功用,能够说是网页应用的一大福音了,不过微信的webview有一点点坑,那篇作品正是列举一下小编在付出进度中相遇的局地难点以及本身找到的片段缓和方案。

直白放到必要显示授权页的onload里

onLoad: function (options) {

      //登入授权部分逻辑

      var that = this

      var title = arguments[2] ? arguments[2]澳门新萄京官方网站, : '授权登入退步,部分机能将不可能利用,是不是再次登入?';//当用户裁撤授权登6时,弹出的认同框文案

      var user = wx.getStorageSync('user');//登6过后,用户新闻会缓存

      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) { //假使用户重新同意了授权登6

                      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{

                      //能够在这里丰硕3个承认授权的页面,要是不想加的话,就必要每一次跳转到这一个页面都检查实验三遍是或不是授权,那么这些函数就应有松手任何钩子函数里了

                      console.log('用户第四回拒绝了授权,在此间转换页面')

                    }

                  }

                })

              }

            })

          }

        })

      } else {//如若缓存中已经存在user  那就是已经报到过

        var app = getApp()

        app.globalData.user = user

      } 

  }

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

微信小程序创设项目

多年来,微信官方修改了 getUserInfo、authorize等 接口,十分小概间接弹出授权窗口,那让大家原先壹开头就获得用户新闻完毕报到的功用全部失效,新明确是率先次拿走用户新闻只能通过 button 去接触,那么有怎么着化解方案吧?

微信小程序开辟公测四个月.数据传递的方法很少.日常遇上页面销毁后回传参数的主题素材,小程序中并未看似Android的startActivityForResult的秘诀,也尚无类似广播那样的简报形式,更不曾看似eventbus的车轱辘可用.

相见的难点

  1. openid登陆难题
  2. webview动态src
  3. 开垦作用
  4. 享受作用
  5. 环视普通二维码跳转特定页面
  6. 回去开关缺点和失误难题

咱俩须要经过开荒者工具,来成功微信小程序创设和代码编辑。

自身的思绪是1进去小程序的时候,立马去调用登6接口(wx.login,从前的代码不用变)并在回调中去调用获取用户音信接口(wx.getUserInfo),那时候就须要极其注意了,必要会wx.getUserInfo的获得退步钩子进行剖断,如若战败,那么直接跳转去登陆页面(登陆页面中能够达成开关登6);如果成功,继续持续逻辑代码。

今日已知传递参数的秘籍只找到三种,先计算下.由刘阳处在公开测试阶段,文档也不是很稳固,平日修改,方今尚没有人工轮子.

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>

微信遭受里的成都百货上千网页都是用页面要促成网址的登录功效,只要把登6的音信,比如openid只怕其余消息拼接到src里就好了。

那边有个难点,公众号的账号种类一般是以openid来判别唯1性的,小程序是可以获得openid的,可是小程序的openid和原公众号之类的openid是不一致的,须求将本来的openid账号类别进步为unionid账号连串。

以下是微信对unionid的介绍

收获用户大旨消息(UnionID机制)

在关心者与民众号发出音讯交互后,公众号可得到关切者的OpenID(加密后的微功率信号,每一种用户对每一种公众号的OpenID是不今不古的。对于区别公众号,同壹用户的openid分歧)。公众号可由此本接口来依据OpenID获取用户主旨新闻,包括别称、头像、性别、所在城市、语言和关爱时间。

请留意,假设开垦者有在八个公众号,或在公众号、移动选用之间联合用户帐号的急需,须求前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可使用UnionID机制来满足上述供给。

UnionID机制表明:

开辟者可经过OpenID来获得用户大旨音讯。极其要求小心的是,要是开辟者具有七个活动选择、网址选拔和民众帐号,可通过获得用户核心音讯中的unionid来差距用户的唯1性,因为固然是同三个微信开放平台帐号下的位移选取、网址使用和公众帐号,用户的unionid是无与伦比的。换句话说,同一用户,对同二个微信开放平台下的分化应用,unionid是1致的。

做完以上步骤,就能够调用小程序api wx.getUserInfo() 来收获用户音讯了,此步骤供给张开后台消息解密进程,在此就不再赘言,结合小程序api文档操作就好。

猎取到unioid之后,将unionid音讯拼接到src就足以拓展网页登6操作了(前提是网页能够用跳转链接的形式登入,类似群众号页面获得openid的花样)。

开垦者工具安装达成后,张开并采取微信扫码登入。选用成立“项目”,填入上文获取到的AppID(破解版,随意填),设置2个本地品种的称谓(非小程序名称),例如“笔者的首先个等级次序”,并选取一个本地的公文夹作为代码存款和储蓄的目录,点击“新建项目”就足以了。

现实代码如下:

先上GIF:

webview动态src

微信的webview有个坑的地方,不会动态的监听src的变化,那就招致了贰个标题,要经过更换src完毕页面跳转就不得以了。
本人尝试了部分主意之后,找到了三个消除方案:

微信webview在页面load的时候会加载2次webview,我们就应用那性格格来达成动态src难题。

  1. 率先把要跳转的链接新闻设置成全局变量,要改动src的时候,先把要src以’?‘拆分为链接和参数两有个别,存入全局函数,再调用onLoad就能够实现webview刷新了。
  2. 页面跳转时,我们也亟需src的动态刷新,所以要把链接新闻存入全局函数;页面跳转时,onShow函数会被调用,那时候再调用2遍onLoad就足以了。

澳门新萄京官方网站数据缓存,网页程序迁移至微信小程序web。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=一&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>

澳门新萄京官方网站数据缓存,网页程序迁移至微信小程序web。为便宜初学者领悟微信小程序的着力代码结构,在成立进度中,就算接纳的当麻芋果件夹是个空文件夹,开荒者工具会唤起,是还是不是供给创立1个quick start项目。采用“是”,开采者工具会拉拉扯扯我们在开拓目录里生成二个简短的demo。

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);

}

});

}

});

}

})

澳门新萄京官方网站 1

支出作用

webview里面能够通过jssdk来贯彻部分小程序成效,但不能够一贯调用小程序的开垦作用,那时候大家就供给扭转一下宗旨了:

  1. 在网页里引进微信jssdk
  2. 在网页须求倡导支付的地方,调用跳转页面的接口,调控小程序跳转到小程序的支出页面(那么些要在小程序里独自写的),跳转的时候,必要把订单的某些音信都凑合到链接里,订单消息由后台重临,须要经过微信支付类别的联结下单接口,具体参看支付文档。
  3. 跳转到小程序支付页面后,由小程序页面发起支付,支付到位后跳转回webview页面,通过事先安装的动态src,调整webview跳转到特定的页面。

JavaScript

// 网页引进jssdk // 网页发起支付 wx.miniProgram.navigateTo({ // payData由后台重返,首假如内需联合下单平台的prepay_id url: '../pay/index?data=' encodeU奇骏IComponent(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

收获用户新闻成功的回调具体得看工作,获取战败的回调重如若加放大计时器去看清页面是或不是加载成功,加载成功后再保存当前页面路线(用于登6成功后跳转),最终跳转到3个包蕴登入按键的页面(不在app.js中产生报到,而是在login.js中做到报到,第四回展开就静默授权了)

1.APP.js

分享作用

小程序直接分享的webview所在的页面,如若须要丰盛页面参数,那大家就要求管理一下了。

  1. webview内是无法直接发起分享的,需求先用wx.miniProgram.postMessage接口,把须求分享的新闻,推送给小程序;推送给小程序的音讯不是实时管理的,而是用户点击了分享按键之后,小程序才再次回到读取的,那将要求各种须要分享的页面再进来的时候就发起wx.miniProgram.postMessage推送分享音讯给小程序。
  2. 小程序页面通过bindmessage绑定的函数读取post音讯,分享的新闻会是3个列表,大家取末了3个享用就好,把分享音信管理好,存到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
    })
},

App({

澳门新萄京官方网站 2login页面,点击开关完结报到

本人把常用且不会更动的参数放在APP.js的data里面了.在每一种page中都可以得到var app = getApp();

环视普通2维码跳转特定页面

除开享受作用之外,小程序还是能够经过配备,达成扫描普通2维码跳转特定页面包车型大巴法力。

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

为了有利于小程序开采者更便捷地松开小程序,包容线下已部分2维码,微信公众平台开放扫描普通链接二维码跳转小程序技巧。

效用介绍

日常链接2维码,是指开采者使用工具对网页链接举办编码后生成的二维码。

线下厂商可不需改换线下二维码,在小程序后台完毕安插后,就可以在用户扫描普通链接2维码时张开小程序,使用小程序的作用。
对于常见链接二维码,近来支撑选取微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码规则

依据贰维码跳转规则,开荒者须要填写必要跳转小程序的2维码规则。必要如下:

  1. 二维码规则的域名须通过ICP备案的评释。
  2. 帮助http、https、ftp早先的链接(如:、)。
  3. 2个小程序帐号可配备不多于拾贰个2维码前缀规则。

前缀占用规则

开拓者可选用是不是占用符合二维码相称规则的全体子规则。如选取占用,则别的帐号不可申请选拔满意该前缀匹配规则的其它子规则。

如:若开荒者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)
    }
}

onLaunch: function () {

下面介绍登陆页面包车型大巴逻辑代码:

app上就足以得到存在data中的参数.

归来按键缺失难题

假定web页面是在率先个页面包车型大巴话,那时候会有1个难题,小程序的回到按键就未有了,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" // 错误信息页面
  ],

//调用API从本地缓存中获取数据

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);

}

}

})

 

参谋链接

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

    2 赞 2 收藏 评论

澳门新萄京官方网站 3

var logs = wx.getStorageSync('logs') || []

login思路:1进入该页面,从缓存中把上二个页面拿出去(读取后必要排除该缓存),然后把登入按键设置成获取用户新闻项目,如

二. wx.navigateTo({})中U奥迪Q3L指引参数

logs.unshift(Date.now())

澳门新萄京官方网站 4设置签到按键

demo中曾经写出:

wx.setStorageSync('logs', logs)

点击登6按键后触发bindgetuserinfo回调,在回调中推断是还是不是授权,没有一些击鲜明授权就提示要授权,有授权就径直调用app.js的授权方法,最终重定向到上八个页面(是重定向不是回到,而且亟需专注是还是不是导航页面

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

},

澳门新萄京官方网站 5报到回调

页面间传递参数的笔记

getUserInfo:function(cb){

到那边,须求点击按键技艺触发登6已解决。

 

var that = this;

PS:须求思考的主题材料是,在别的页面,怎么才具掌握是或不是业已变成报到了吧?

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

if(this.globalData.userInfo){

微信支付文书档案中的数据缓存方法:

typeof cb == "function" && cb(this.globalData.userInfo)

壹仓库储存数据

}else{

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

//调用登入接口

二获取数据

wx.login({

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

success: function () {

 

wx.getUserInfo({

key是当地缓存中的钦命的 key,data是索要仓储的内容.

success: function (res) {

详细情况见微信小程序开垦文档:文档

that.globalData.userInfo = res.userInfo;

 

typeof cb == "function" && cb(that.globalData.userInfo)

贴上代码:

}

1.index.js

})

 

}

[javascript] view plain copy

});

 

}

  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. })  

},

2.index.wxml

globalData:{

[html] view plain copy

userInfo:null

 

}

  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="searchInput伊夫nt" />  
  5. <button style="background-color:#ff0000;margin:20rpx" bindtap="saveinput">存入Storage</button>  
  6. </view>  

})

3.newpage.js

? app.json是对1切微信小程序的大局配置。我们得以在那么些文件中配备微信小程序是由什么页面组成,配置小程序的窗口背景观,配置导航条样式,配置暗中认可标题。注意该文件不可增加任何注释。越多可配置项可参照布局详解

 

{

 

"pages":[

[javascript] view plain copy

"pages/index/index",

 

"pages/logs/logs"

  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

"window":{

 

"backgroundTextStyle":"light",

 

"navigationBarBackgroundColor": "#fff",

[html] view plain copy

"navigationBarTitleText": "WeChat",

 

"navigationBarTextStyle":"black"

  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>  

}

5.app.js

}

 

? app.wxss是全方位微信小程序的公家样式表。我们能够在页面组件的class属性上向来运用app.wxss中评释的体裁规则。

 

.container {

[javascript] view plain copy

height: 100%;

 

display: flex;

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

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

创办页面

? 在这些科目里,大家有五个页面,index页面和logs页面,即应接页和小程序运转日志的显得页,他们都在pages目录下。微信小程序中的每三个页面的【路线 页面名】都亟待写在app.json的pages中,且pages中的第一个页面是小程序的首页。

? 每八个微信小程序页面是由同路径下同名的多少个差别后缀文件的结合,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是本子文件,.json后缀的文书是布局文件,.wxss后缀的是样式表文件,.wxml后缀的文本是页面结构文件。

? index.wxml是页面的组织文件:

{{userInfo.nickName}}

{{motto}}

? 本例中使用了、、来搭建页面结构,绑定数据和交互管理函数。

? index.js是页面的台本文件,在那一个文件中大家能够监听并拍卖页面包车型大巴生命周期函数、获取小程序实例,注明并管理多少,响应页面交互事件等。

//index.js

//获取使用实例

var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

console.log('onLoad')

var that = this

//调用应用实例的方法得到全局数据

app.getUserInfo(function(userInfo){

//更新数据

that.setData({

userInfo:userInfo

})

})

}

})

? index.wxss是页面的样式表:

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

}

.usermotto {

margin-top: 200px;

}

? 页面的样式表是非供给的。当有页面样式表时,页面包车型大巴体制表中的体制规则会层叠覆盖app.wxss中的样式规则。如若不点名页面包车型大巴样式表,也可以在页面包车型地铁构造文件中一贯利用app.wxss中钦命的体制规则。

? index.json是页面包车型大巴布署文件:

? 页面包车型大巴配置文件是非供给的。当有页面包车型大巴配置文件时,配置项在该页面会覆盖app.json的window中千篇壹律的安插项。假设未有一点名的页面配置文件,则在该页面平素使用app.json中的暗许配置。

? logs的页面结构

{{index 1}}. {{log}}

? logs页面使用调整标签来组织代码,在 上使用wx:for-items绑定logs数据,并将logs数据循环张开节点

//logs.js

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

Page({

data: {

logs: []

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) {

return util.formatTime(new Date(log))

})

})

}

})

1个MINA程序主体部分由三个公文组成,必须放在项目标根目录,如下:

文件    必需    作用

app.js    是    微信小程序逻辑

app.json    是    微信小程序公共设置

app.wxss    否    微信小程序公共样式表

多少个MINA页面由多少个文本组成,分别是:

文件类型    必须    效率

wxml    是    页面结构

wxss    否    页面样式表

json    否    页面配置

js    是    页面逻辑

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站数据缓存,网页程序迁移至

关键词: