微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解


Posted in Javascript onMarch 28, 2019

本文实例讲述了微信小程序学习笔记之跳转页面、传递参数获得数据操作。分享给大家供大家参考,具体如下:

前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理。现在需要实现点击博客标题或缩略图,跳转到博客详情页面。

微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到官方文档的一句话打消了念头,因为没有认证......

微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

【方法一 使用navigator组件跳转传参】

前台博客列表页面data.wxml:(后台数据交互参考上一篇)

<view wx:for="{{artinfo}}" wx:for-item="artinfo">
  <view>
    <navigator url="/pages/detial/detial?article_id={{artinfo.article_id}}" >
     {{artinfo.article_title}}
    </navigator>
  </view>
  <navigator url="/pages/detial/detial?article_id={{artinfo.article_id}}" >
   <image src="{{artinfo.thumbnail}}"></image>
  </navigator>
</view>

前台博客详情页面detail.js:

Page({
 onLoad: function (options) { //options:页面跳转所传的参数
  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
     });
    }
   }
  })
 }
})

前台博客详情页面detail.wxml:

<view>{{artinfo.article_title}}</view>
<view>———————————————————————————</view>
<rich-text nodes="{{artinfo.article_content}}"></rich-text>

后台获取博客内容接口:(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'] = '参数错误';
   }
   echo json_encode($arr);die;
 }

实现效果如下:

微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

【方法二 使用wx.navigateTo API跳转传参】

前台博客列表页面data.wxml:

(data-xxx:自定义参数属性,catchtap:绑定点击事件)

<view wx:for="{{artinfo}}" wx:for-item="artinfo">
  <view data-article_id="{{artinfo.article_id}}" catchtap="showDetial">
     {{artinfo.article_title}}
   </view>
  <view data-article_id="{{artinfo.article_id}}" catchtap="showDetial">
   <image src="{{artinfo.thumbnail}}"></image>
  </view>
</view>

前台博客列表页面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
  })
 }
})

其他与方法一相同,可实现与方法一相同跳转传参。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 #Javascript
深入理解es6块级作用域的使用
Mar 28 #Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 #Javascript
详解React服务端渲染从入门到精通
Mar 28 #Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 #Javascript
JavaScript刷新页面的几种方法总结
Mar 28 #Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
对python中return与yield的区别详解
2020/03/12 Python
python3代码中实现加法重载的实例
2020/12/03 Python
分享一个python的aes加密代码
2020/12/22 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
业务员的岗位职责
2014/03/15 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
运动会表扬稿
2015/01/16 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
MySQL 数据表操作
2022/05/04 MySQL