WeChat 미니 프로그램에서 페이지 점프 및 값 전송을 구현하는 방법

이 글에서는 WeChat 애플릿이 페이지 점프와 가치 이전을 실현하고 가치를 획득하는 방법을 주로 소개합니다. WeChat 애플릿 페이지 점프와 가치 이전의 일반적인 작동 기술을 예시 형식으로 요약하고 분석합니다.

이 기사의 예에서는 페이지 점프, 가치 전송 및 가치 획득을 실현하는 WeChat 애플릿의 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.

안드로이드에서는 페이지 점프와 값이 번들을 통해 전달됩니다. 이제 미니 프로그램의 목록 점프와 페이지 값에 대해 알아 보겠습니다.

my.wxml

<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="info_list">
  <block wx:for="{{userListInfo}}" >
   <view class="weui_cell" data-index="{{item.index}}" id="{{item.index}}"
    bindtap="userinfo_item">
    <view class="weui_cell_hd">
     <image src="{{item.icon}}"></image>
    </view>
    <view class="weui_cell_bd">
     <view class="weui_cell_bd_p"> {{item.text}} </view>
    </view>
    <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view>
    <view class="with_arrow"></view>
   </view>
  </block>
 </view>
</view>

my.js

var app = getApp()
Page({
 data: {
  userInfo: {},
  userListInfo: [{
   icon: '../../images/iconfont-dingdan.png',
   text: '我的订单',
   isunread: true,
   unreadNum: 2,
   index:1
  }, {
   icon: '../../images/iconfont-kefu.png',
   text: '联系客服',
   index: 5
  }, {
   icon: '../../images/iconfont-help.png',
   text: '常见问题',
   index: 6
  }]
 },
 onLoad: function () {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function (userInfo) {
   //更新数据
   that.setData({
    userInfo: userInfo
   })
  })
 },
 userinfo_item: function (e) {
  var index = e.target.dataset.index;
  console.log("----index----" + index)
  console.log('-----id-----'
   + e.currentTarget.id)
  var app = getApp();
  //设置全局的请求访问传递的参数
  app.requestId = e.currentTarget.id;
  app.requestIndex = index;
 }
})

WeChat 애플릿은 값을 전달하도록 ID 메서드 식별자를 설정합니다.

점프할 항목에서 ID를 설정하고 해당 키를 현재 ID 값에 할당합니다. ,
예: id="{{item.index}}"id="{{item.index}}"
后我们在js的bindtap的响应事件中获取，并传递到下一个界面中；
获取到id传的值
通过e.currentTarget.id;获取设置的id值，并通过设置全局对象的方式来传递数值，
获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;
在调试模式下：我们也可以在，wxml中查看到我们设置的每一个item的id值

通过使用data - xxxx 的方法标识来传值

通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名 比my.wxml中的data-index。
如何获取data-xxxx传递的值？
在js的bindtap的响应事件中：
通过数据解析一层层找到数据，var id=e.target.dataset.index그 후 js의 바인딩 탭 응답 이벤트에서 가져와서 다음 인터페이스에 전달합니다.
전달된 값을 가져옵니다. by id

e.currentTarget.id;를 통해 설정된 id 값을 가져오고 전역 개체를 설정하여 값을 전달합니다.

전역 개체 가져오기 var app=getApp();</ code> //전역 요청 액세스에 의해 전달된 매개변수 설정 <code>app.requestDetailid=id;디버그 모드: wxml에서도 볼 수 있습니다. 우리가 설정한 각 항목의 id 값

은 데이터의 메소드 식별자를 사용하여 값을 전달합니다. - xxxx

는 데이터의 메소드 식별자를 사용하여 값을 전달합니다. xxxx는 my보다 더 나은 이름으로 사용자 정의할 수 있습니다. wxml 데이터 인덱스.

data-xxxx가 전달한 값을 어떻게 얻나요?

js의 바인딩탭 응답 이벤트에서: 데이터 분석을 통해 레이어별로 데이터를 찾으세요. var id=e.target.dataset.index (data-id에 따라 이름 지정) 예를 들어 js의 두 인쇄물은 두 가지 다른 방법으로 얻은 ID입니다.

페이지에 걸쳐 WeChat 애플릿 전체에서 값을 가져오는 방법

위 방법에 따라 전달될 값을 설정합니다. 페이지가 이동한 후 다음 페이지에서 전달된 데이터를 가져와야 합니다(

이 데이터는 전달되기 전에 이미 전달되었습니다. 전역 변수

)로 설정하는 것은 점프 후 js 페이지에서 전역 변수에 새 키와 값을 추가하는 것과 같습니다. 전달된 데이터 Detail.js

도 전역 변수를 통해 가져옵니다. 메소드, (즉, 앱과 동일합니다. .js의 변수 값이 동일합니다.)

var id=getApp().requestId;
var index=getApp().requestIndex;
console.log(id);
console.log(index);

링크를 통해 매개변수 전달:

wx.navigateTo({
 url: '/pages/account/feedback/feedback?test=feedback_test&name=jia',
 success: function(res) {},
 fail: function(res) {},
 complete: function(res) {},
})

페이지를 클릭하여 이동할 때 전달됩니까? 매개변수를 전달하는 방법. 점프 후 페이지의 JS에서 다음 수신을 수행합니다.

onLoad: function (e) {
  var movieid = getApp().requestId;
  var movieIndex = getApp().requestIndex;
  console.log("-----feedback--movieid--" + movieid +" " + movieIndex);
  console.log("-----feedback--test--" + e.test);
  console.log("-----feedback--name--" + e.name);
 },

더 좋은 방법은 링크를 통해 매개변수를 전달하는 것입니다. 첫 번째 방법은 Android의 페이지 점프와 다소 비슷하며 전달된 일부 매개변수를 애플리케이션에 씁니다. , 두 번째는 번들 메소드를 통해 전달하는 것입니다. 프론트엔드 초보자 요약, 프론트엔드 경험이 풍부한 학생들이 더 많은 아이디어를 제공할 수 있기를 바랍니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS에서 웹 버전 계산기를 구현하는 방법

JS를 사용하여 공의 포물선 궤적 이동을 구현하는 방법

🎜🎜🎜JavaScript를 사용하여 이진 트리 탐색을 구현하는 방법🎜🎜🎜 🎜AXIOS 크로스 도메인에서 쿠키를 구현하는 방법🎜🎜🎜🎜JavaScript에서 탄력적인 효과를 얻는 방법🎜🎜

위 내용은 WeChat 미니 프로그램에서 페이지 점프 및 값 전송을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!