数量缓存,网页程序迁移至微信小程序web

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

2018/08/02 · JavaScript
· 小程序

最初的小说出处: NeoPasser   

小程序今后尤为流行,不过公司的成都百货上千门类都以用网页写的,小程序语法不相同盟原生网页,使得旧有项目搬迁至小程序代价很高。

小程序此前开放了webview成效,能够说是网页应用的一大福音了,不过微信的webview有一对坑,那篇文章正是列举一下本身在开发进度中遇到的一对标题以及自小编找到的部分缓解方案。

直白放到要求呈现授权页的onload里

onLoad: function (options) {

      //登录授权部分逻辑

      var that = this

      var title = arguments[2] ? arguments[2] :
‘授权登录退步,部分功效将无法应用,是或不是再次登录?’;//当用户裁撤授权登录时,弹出的认同框文案

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

      console.log(user)

数量缓存,网页程序迁移至微信小程序web。      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{

                     
//能够在这边丰裕3个确认授权的页面,假诺不想加的话,就供给每一遍跳转到那个页面都检查和测试1遍是不是授权,那么那些函数就应当放手任何钩子函数里了

                      console.log(‘用户第1回驳回了授权,在那里变换页面’)

                    }

                  }

                })

              }

            })

          }

        })

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

        var app = getApp()

        app.globalData.user = user

      } 

  }

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

微信小程序开发内测二个月.数据传递的艺术很少.平时遭遇页面销毁后回传参数的难点,小程序中并没有接近Android的startActivityForResult的章程,也不曾看似广播那样的电视发表格局,更没有接近eventbus的车轮可用.

教你怎样运用微信开发工具体验微信小程序。微信小程序将在二零一七年12月8日行业内部上线,近年来个人无法注册小程序,若是大家要向体验小程序开发进度能够使用微信开发工具实行体验。

遇见的题材

  1. openid登录难点
  2. webview动态src
  3. 支付成效
  4. 享用作用
  5. 扫描普通二维码跳转特定页面
  6. 归来按钮缺点和失误难点

现行反革命已知传递参数的章程只找到三种,先计算下.由李樯处在内测阶段,文书档案也不是很稳定,平日修改,最近尚没有人工轮子.

1 创立项目

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来不一致用户的唯一性,因为只假设同1个微信开放平台帐号下的活动应用、网站选用和公众帐号,用户的unionid是绝无仅有的。换句话说,同一用户,对同一个微信开放平台下的不比选用,unionid是一致的。

做完以上步骤,就能够调用小程序api wx.getUserInfo()
来赢得用户消息了,此步骤须要展开后台新闻解密进度,在此就不再赘述,结合小程序api文档操作就好。

收获到unioid之后,将unionid新闻拼接到src就足以拓展网页登录操作了(前提是网页能够用跳转链接的办法登录,类似群众号页面得到openid的花样)。

先上GIF:

先是在微信提供的网站下载开发工具:

webview动态src

微信的webview有个坑的地方,不会动态的监听src的生成,那就造成了2个题材,要通过变更src达成页面跳转就不可以了。
小编尝试了有的办法之后,找到了二个缓解方案:

微信webview在页面load的时候会加载二遍webview,大家就利用那一个天性来完毕动态src难点。

  1. 率先把要跳转的链接新闻设置成全局变量,要改变src的时候,先把要src以’?‘拆分为链接和参数两局地,存入全局函数,再调用onLoad就能够完成webview刷新了。
  2. 页面跳转时,大家也亟需src的动态刷新,所以要把链接音信存入全局函数;页面跳转时,onShow函数会被调用,那时候再调用1次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) { // 第1回不运营 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>

皇家赌场手机版 1

支出成效

webview里面能够通过jssdk来兑现部分小程序功效,但不能够一贯调用小程序的付出功效,这时候大家就供给转移一下方针了:

  1. 在网页里引入微信jssdk
  2. 在网页须求倡导支付的地点,调用跳转页面包车型地铁接口,控制小程序跳转到小程序的开销页面(那一个要在小程序里单独写的),跳转的时候,须要把订单的局地消息都凑合到链接里,订单音讯由后台重回,供给通过微信支付系统的联结下单接口,具体参看支付文书档案。
  3. 跳转到小程序支付页面后,由小程序页面发起支付,支付成功后跳转回webview页面,通过事先设置的动态src,控制webview跳转到特定的页面。

JavaScript

// 网页引入jssdk // 网页发起支付 wx.miniProgram.navigateTo({ //
payData由后台再次回到,首倘若亟需联合下单平台的prepay_id url:
‘../pay/index?data=’ + encodeUTiguanIComponent(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)
    }
  }

1.APP.js

安装达成后,打开开发工具,将会须求扫码进入,如图1所示。

享受作用

小程序直接分享的webview所在的页面,借使急需添加页面参数,那我们就需求处理一下了。

  1. webview内是不能够平素发起分享的,须要先用wx.miniProgram.postMessage接口,把要求分享的音信,推送给小程序;推送给小程序的音讯不是实时处理的,而是用户点击了享受按钮之后,小程序才回来读取的,那就须要各样须求分享的页面再进来的时候就发起wx.miniProgram.postMessage推送分享音信给小程序。
  2. 数量缓存,网页程序迁移至微信小程序web。小程序页面通过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
    })
},

本人把常用且不会更改的参数放在APP.js的data里面了.在种种page中都能够获得var
app = getApp();

皇家赌场手机版 2

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

除开享受效率之外,小程序仍可以透过布署,完结扫描普通二维码跳转特定页面包车型地铁成效。

以下是微信对此功能的牵线

为了便于小程序开发者更简便易行地拓宽小程序,包容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。

作用介绍

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

线下商行可不需更换线下二维码,在小程序后台实现布局后,即可在用户扫描普通链接二维码时打开小程序,使用小程序的成效。
对于常见链接二维码,方今支撑选择微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码规则

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

  1. 二维码规则的域名须通过ICP备案的辨证。
  2. 帮助http、https、ftp开头的链接(如:、)。
  3. 多个小程序帐号可计划不多于11个二维码前缀规则。

前缀占用规则

开发者可选用是或不是占用符合二维码匹配规则的全体子规则。如选拔占用,则别的帐号不可申请接纳满意该前缀匹配规则的别的子规则。

如:若开发者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中的参数.

报到后,将会进入开发工具主界面,如图2所示。

回来按钮缺点和失误难题

若果web页面是在首先个页面包车型客车话,那时候会有三个难题,小程序的归来按钮就没有了,webview不恐怕使用微信的回来按钮了,那时候只要在webview页前边多加1个跳转页面就好了(第3个页面也足以设置成获取用户权限的页面,可是笔者深感这样感受倒霉,也不是享有页面都要用户获得了权力才得以行使)

说到底的页面层级

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" // 错误信息页面
  ],

 

皇家赌场手机版 3

参考链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获得情势

    2 赞 2 收藏
    评论

皇家赌场手机版 4

2. wx.navigateTo({})中U奥迪Q5L引导参数

大家选用【本地小程序项目】,选取【添加档次】如图3所示。

demo中曾经写出:

皇家赌场手机版 5

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

创建【HelloWorld】项目,且AppID选择【无AppID】,如图4所示。

页面间传递参数的笔记

皇家赌场手机版 6

 

添加档次后,选拔【编辑】,将会在开发工具中看看图5所示界面。

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

皇家赌场手机版 7

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

2 项目布局

①储存数据

创立小程序项目后,开发工具在根目录(项目路线)中有多少个基点文件app.js、app.json、app.wxss和五个文本夹pages、utils。

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

(1)app.js :是程序主入口的脚本文件(小程序逻辑);

②获取数据

(2)app.json :是大局配置文件(小程序公共设置);

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

(3)app.wxss :是小程序的样式表文件(小程序公共样式表);

 

(4)pages:全数的页面都在 pages 文件夹中(小程序页面);

key是当地缓存中的钦赐的 key,data是急需仓库储存的内容.

(5)utils:存放全局的一些.js文件,公共使用的部分事件处理代码文件能够松开该文件夹下,用于全局调用。

端详见微信小程序支付文书档案:文档

二个小程序主体部分由多个公文组成,必须放在项指标根目录上边。小程序的有所页面放置在pages文件夹中,且各样页面占据3个子文书夹,并由多个文本组成,分别是index.js(页面逻辑)、index.json(页面配置)、index.wxml(页面结构)和index.wxss(页面样式表)。

 

瞩目:多少个公文名必须和子文件夹一致

贴上代码:

皇家赌场手机版 8

1.index.js

在示范项目中,工具自动生成了多少个页面,分别是首页面和日志页面。

 

3 主体布局文件

[javascript] view
plain copy

应用app.json文件来对微信小程序实行全局配置,决定页面文件的门道、窗口表现、设置网络超时时间、设置多
tab 等。

 

//app.js

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

App({

2.index.wxml

onLaunch: function () {//小程序运营的时候就会调用它

[html] view
plain copy

//调用API从地点缓存中获取数据,若没有创建一个空数组

 

var logs = wx.getStorageSync(‘logs’) || []

  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>  

logs.unshift(Date.now())//插入当前的日期

3.newpage.js

wx.setStorageSync(‘logs’, logs)//内容写入到地点缓存中

 

},

 

getUserInfo:function(cb){//获取当前用户登录音讯

[javascript] view
plain copy

var that = this

 

if(this.globalData.userInfo){//已登录

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

typeof cb ==

4.newpage.wxml

“function” && cb(this.globalData.userInfo)

 

}else{

 

//调用登录接口

[html] view
plain copy

wx.login({

 

success: function () {

  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>  

wx.getUserInfo({

5.app.js

success: function (res) {

 

that.globalData.userInfo = res.userInfo

 

typeof cb ==

[javascript] view
plain copy

“function” && cb(that.globalData.userInfo)

 

}

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

})

}

})

}

},

globalData:{

userInfo:null

}

})

那边起始化了八个 App 对象,并且定义了七个点子 onLaunch,getUserInfo 和
globalData。

4 app.json

{

“pages”:[//工程有多个页面

“pages/index/index”,//第3个成分作为小程序的主页,与index名称无关

“pages/logs/logs”

],

“window”:{

“backgroundTextStyle”:”light”,//背景文本类型

“navigationBarBackgroundColor”: “#fff”,//导航背景颜色

“navigationBarTitleText”: “WeChat”,//导航文本

“navigationBarTextStyle”:”black”//导航文字颜色

}

}

其一布局文件中定义了七个节点,【pages】和【window】, pages
是小程序的拥有页面对应的路径, window 是小程序窗口的布署消息。

5 app.wxss

相当于css文件

/**app.wxss**/

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

6 pages文件夹

pahes文件夹中布局如图6所示。

皇家赌场手机版 9

个中index和logs文件夹对应app.json中五个页面。

6.1 index文件夹

6.1.1 index.js

//index.js

//获取使用实例

var app = getApp()//获取app实例,即根目录app.js定义的APP

皇家赌场手机版 ,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

})

})

}

})

6.1.2 index.wxml

首页面UI

//容器

//绑确定地点击事件(index.js中定义)

{{userInfo.nickName}}

//motto为pages/index/index.jsp中定义数据

{{motto}}

对应于首页面包车型地铁一张图纸和一句问候语,如图7所示。

皇家赌场手机版 10

7 上传小程序

logs 和 index 的页面包车型客车基本思路都是平等。 开发完小程序后,大家怎么布局呢?
切换来项目选项卡,然后点击上传按钮即可。

皇家赌场手机版 11

是因为作者的环境并未内测账号,所以在上传区域展现的是种类未涉及 AppID,
即使有了测试账号,就会议及展览示你的 AppID 了。
近年来只有内测账号才能够上传小程序。这正是绝无仅有的差别了。没有内测账号只是无法上传,但一心能够在当地开发和测试。

Leave a Comment.