本文實(shí)例講述了微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁(yè)面、傳遞參數(shù)獲得數(shù)據(jù)操作。分享給大家供大家參考，具體如下：
成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、隆林網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為隆林等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
前面一篇介紹了微信小程序表單提交與PHP后臺(tái)數(shù)據(jù)交互處理?，F(xiàn)在需要實(shí)現(xiàn)點(diǎn)擊博客標(biāo)題或縮略圖，跳轉(zhuǎn)到博客詳情頁(yè)面。
開始想研究一下微信小程序的web-view組件跳轉(zhuǎn)傳參，把網(wǎng)頁(yè)嵌入到小程序，結(jié)果看到官方文檔的一句話打消了念頭，因?yàn)闆]有認(rèn)證......
【方法一 使用navigator組件跳轉(zhuǎn)傳參】
前臺(tái)博客列表頁(yè)面data.wxml：（后臺(tái)數(shù)據(jù)交互參考上一篇）
{{artinfo.article_title}}
前臺(tái)博客詳情頁(yè)面detail.js：
重慶分公司
重慶分公司
Page({
onLoad: function (options) { //options:頁(yè)面跳轉(zhuǎn)所傳的參數(shù)
var that = this
wx.request({
url: 'https://www.msllws.top/Getdata/detial',
data: {
'article_id': options.article_id
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
if (res.data.state == 1) {
that.setData({
artinfo: res.data.data
})
}else{
wx.showToast({
title: res.data.msg
});
}
}
})
}
})前臺(tái)博客詳情頁(yè)面detail.wxml：
{{artinfo.article_title}} ———————————————————————————
后臺(tái)獲取博客內(nèi)容接口：（tp5）
public function detial()
{
$arr = array('state'=>0,'msg'=>'','data'=>array());
$article_id = $_POST['article_id'];
if($article_id){
$whe['article_id'] = $article_id;
$artinfo = db('article')->field('`article_title`,`article_content`')->where($whe)->find();
if($artinfo){
$arr['state'] = 1;
$arr['msg'] = 'success';
$arr['data'] = $artinfo;
}else{
$arr['msg'] = '沒有信息';
}
}else{
$arr['msg'] = '參數(shù)錯(cuò)誤';
}
echo json_encode($arr);die;
}實(shí)現(xiàn)效果如下：
【方法二 使用wx.navigateTo API跳轉(zhuǎn)傳參】
前臺(tái)博客列表頁(yè)面data.wxml：
（data-xxx：自定義參數(shù)屬性，catchtap：綁定點(diǎn)擊事件）
{{artinfo.article_title}}
前臺(tái)博客列表頁(yè)面data.js：
Page({
onLoad: function () {
var that = this
wx.request({
url: 'https://www.msllws.top/Getdata',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
artinfo: res.data
})
}
})
},
showDetial: function (e) {
var article_id = e.currentTarget.dataset.article_id;
wx.navigateTo({
url: '/pages/detial/detial?article_id=' + article_id
})
}
})其他與方法一相同，可實(shí)現(xiàn)與方法一相同跳轉(zhuǎn)傳參。
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
