图片 4

传参取参,网页程序迁移至微信小程序web

网页程序迁移至Wechat小程序web-view精解

2018/08/02 · JavaScript
· 小程序

原稿出处: NeoPasser   

小程序以后特别流行,可是企业的无数门类都以用网页写的,小程序语法差别盟原生网页,使得旧有项目搬迁至小程序代价非常高。

小程序从前开放了webview作用,能够说是网页应用的一大福音了,可是微信的webview有大器晚成对坑,那篇文章就是列举一下本身在开拓进度中相遇的大器晚成对主题素材以至本身找到的一些消除方案。

js引入:

几天前,Wechat官方改善了 getUserInfo、authorize等
接口,不能直接弹出授权窗口,那让咱们原先一同始就得到客户消息完结报到的功力全体失效,新规定是首先次拿到客商音讯只可以通过
button 去接触,那么有怎么着应用方案吧?

遇到的主题材料

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

const util =require(‘../../utils/util.js’)

自己的思路是生龙活虎进去小程序的时候,立马去调用登入接口(wx.login,在此以前的代码不用变卡塔 尔(英语:State of Qatar)并在回调中去调用获取客户消息接口(wx.getUserInfo卡塔 尔(英语:State of Qatar),这时就要求极度注意了,供给会wx.getUserInfo的收获战败钩子实行决断,若是失利,那么直接跳转去登陆页面(登陆页面中能够完毕开关登入卡塔尔;如若成功,继续持续逻辑代码。

openid登陆难点

Wechatwebview的施用情势异常粗略,只要如下设置src就足以显得具体的网址了。

<!– wxml –> <!– 指向Wechat公众平台首页的web-view –>
<web-view src=”;

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

Wechat意况里的不在少数网页都是用页面要得以达成网址的报到功能,只要把登入的音信,比如openid大概此外音信拼接到src里就好了。

此处有个难题,大伙儿号的账号类别常常是以openid来剖断唯风姿浪漫性的,小程序是能够拿走openid的,不过小程序的openid和原大伙儿号之类的openid是不相像的,需求将本来的openid账号种类进级为unionid账号连串。

以下是Wechat对unionid的牵线

收获客户基本音讯(UnionID机制)

在关切者与大众号发出音讯交互作用后,民众号可得到关怀者的OpenID(加密后的Wechat号,每种客户对每种民众号的OpenID是有一无二的。对于分裂大伙儿号,同风姿罗曼蒂克客商的openid不一致卡塔 尔(阿拉伯语:قطر‎。大伙儿号可经过本接口来依据OpenID获取顾客中央消息,包含别名、头像、性别、所在城市、语言和关爱时间。

请留意,固然开采者有在多个公众号,或在公众号、移动使用之间联合顾客帐号的急需,供给前往Wechat开放平台(open.weixin.qq.com卡塔尔绑定民众号后,才可应用UnionID机制来满意上述要求。

UnionID机制表明:

开发者可因此OpenID来获得客户核心消息。极其供给注意的是,就算开辟者具有多个移动使用、网址接受和民众帐号,可透过得到顾客主旨消息中的unionid来分别顾客的唯风华正茂性,因为假如是同一个Wechat开放平台帐号下的活动使用、网址接受和大众帐号,客商的unionid是唯生龙活虎的。换句话说,同意气风发客户,对同一个Wechat开放平台下的差别选取,unionid是同样的。

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

获得到unioid之后,将unionid音信拼接到src就足以开展网页登陆操作了(前提是网页能够用跳转链接的办法登陆,肖似民众号页面获得openid的样式)。

拿到全局对象和章程:

实际代码如下:

webview动态src

Wechat的webview有个坑之处,不会动态的监听src的更改,那就引致了一个标题,要透过更动src完毕页面跳转就不得以了。
自个儿尝试了部分主意之后,找到了一个建设方案:

Wechatwebview在页面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 app = getApp()

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

}

});

}

});

}

})

付出成效

webview里面可以经过jssdk来达成部分小程序功用,但不可能直接调用小程序的支付功用,那时候我们就供给转移一下政策了:

  1. 在网页里引进微信jssdk
  2. 在网页需求倡导支付的地点,调用跳转页面包车型地铁接口,调控小程序跳转到小程序的开销页面(那个要在小程序里独自写的卡塔尔国,跳转的时候,要求把订单的局地音讯都凑合到链接里,订单音信由后台重回,供给通过Wechat支付系列的会见下单接口,具体参看支付文书档案。
  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中实现报到,而是在login.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
    })
},

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

图片 1login页面,点击按钮完结报到

极目远眺普通二维码跳转特定页面

除外享受功用之外,小程序还足以因而铺排,完成扫描普通二维码跳转特定页面的成效。

以下是Wechat对此意义的牵线

为了便于小程序开荒者更省事地拓展小程序,宽容线下已部分二维码,Wechat民众平台开放扫描普通链接二维码跳转小程序技巧。

功能介绍

经常性链接二维码,是指开采者使用工具对网页链接进行编码后生成的二维码。

线下商家可不需更改线下二维码,在小程序后台完毕布局后,就可以在客户扫描普通链接二维码时展开小程序,使用小程序的作用。
对此何足为奇链接二维码,方今扶植使用Wechat“扫一扫”或Wechat内长按识别二维码跳转小程序.

二维码法规

据他们说二维码跳转法规,开采者要求填写须要跳转小程序的二维码准绳。须求如下:

  1. 二维码法则的域名须通过ICP备案的表达。
  2. 支持http、https、ftp最先的链接(如:、)。
  3. 三个小程序帐号可配备非常少于十个二维码前缀准绳。

前缀占用准绳

开辟者可筛选是或不是占用切合二维码相称法规的全体子法则。如采取占用,则其余帐号不可申请使用满意该前缀匹配准绳的别的子准则。

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

跳转:

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

重回开关缺失难题

借使web页面是在第四个页面包车型大巴话,这个时候会有贰个主题素材,小程序的归来开关就不曾了,webview不能够使用Wechat的回来开关了,此时只要在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" // 错误信息页面
  ],

页面和tabBar之间跳转:

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 收藏
    评论

图片 2

wx.switchTab({

login思路:一进去该页面,从缓存中把上叁个页面拿出去(读取后供给杀绝该缓存卡塔 尔(英语:State of Qatar),然后把登入按键设置成获取客商音信项目,如

url:’../index/index’

图片 3安装签到按键

});

点击登入按钮后触发bindgetuserinfo回调,在回调中推断是或不是授权,未有一点击分明授权就提醒要授权,有授权就一直调用app.js的授权方法,最终重定向到上四个页面(是重定向不是回去,并且亟需专心是否导航页面

页面之间跳转方法:

图片 4登伍回调

1、保留当前页面,跳转到应用内的有些页面,使用wx.navigateBack能够回到到原页面。

到此地,需求点击按键能力触发登陆已消除。

wx.navigateTo({   新页面会有重返按键

PS:必要考虑的主题素材是,在任何页面,怎么才干掌握是还是不是曾经成功报到了吧?

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

,

success: function(res){

// success

},

fail: function() {

// fail

},

complete: function() {

// complete

}

})

2、wx.redirectTo(OBJECT)

关门当前页面,跳转到应用内的某部页面。

wx.redirectTo({   新页面不会有再次来到开关

url:’../index/index’,

,

success: function(res){

// success

},

fail: function() {

// fail

},

complete: function() {

// complete

}

})

3、x.navigateBack(OBJECT)

闭馆当前页面,重返上大器晚成页面或体系页面。可通过 getCurrentPages())
获取当前的页面栈,决定须求回到几层。纵然 delta
大于现存页面数,则赶回到首页。

varpages = getCurrentPages()varnum = pages.length

navigateBack:function(){wx.navigateBack({

delta: num

})

}

页面跳转也可间接用 url:

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

<navigator url=”../login/login?title=111″
redirect>在当前页张开新页面</navigator>

要是要传 数组, 字典等繁缛类型, 要先用 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:(Wechat大伙儿号和小程序上线的话都必得是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”

}

}

发表评论