تفسير انتقال الصفحات في WeChat Mini Program

　انتقال الصفحة وإرسال المعاملات في تطبيقات ويكس لونغ بينغ، هذا هو ميزة يجب أن يستخدمها كل من يطور تطبيقات ويكس لونغ بينغ، سأقوم بتسجيل ملاحظاتي وأدوات البرمجة التي تعلمتها.

لم أكن قد تعاملت مع تطبيقات ويكس لونغ بينغ، وأنا لا أعرف الكثير عن لغات البرمجة والخصائص فيها، إذا كان هناك أي نقاط غير واضحة، أرجو من الكبار أن يوجهونني. اليوم سأشرح كيفية الانتقال والمعاملات في تطبيقات ويكس لونغ بينغ، وبدون إطالة، سأقوم بإرفاق الكود.

الوظيفة التي يتم تنفيذها هي إضافة خاصية النقر على القائمة وإرسال المعاملات إلى الصفحة التالية;

　　　

كود كما يلي:

<import src="../WXtemplate/headerTemplate.wxml"/> 
<view> 
 <!--صور التدولي--> 
 <view> 
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoPlay}}" interval="{{intervalTime}}" duration="{{Time}}"> 
 <block wx:for="{{imageURl}}"> 
  <swiper-item> 
   <image src="{{item}}" class="imagePX"></image> 
  </swiper-item> 
 </block> 
 </swiper> 
 </view> 
 <!--أزرار الوظائف--> 
 <view class="section-bg"> 
 <block wx:for="{{buttonNum}}"> 
  <!--نموذج--> 
  <template is="buttonList" data="{{item}}"/> 
  <!--<view class="section-item"> 
  <image class="section-img" src="{{item.image}}"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view>--> 
 </block> 
 </view> 
 <!--قائمة الأخبار--> 
 <view> 
 <block wx:for="{{listNum}}"> 
  <template is="newList" data="{{item,index}}"/> 
 </block> 
 </view> 
 </view> 

حيث

<template is="buttonList" data="{{item}}"/>　

للمكتبة الشفوية كود النموذج التالي

<template name="buttonList"> 
 <view class="section-item"> 
  <image class="section-img" src="{{item.image}}" bindtap="buttonClick"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view> 
</template> 
<!--list--> 
<template name="newList"> 
 <view class="section-list" bindtap="listClick" id="{{index}}"> 
 <view> 
  <image class="list-img" src="{{item.image}}"></image> 
 </view> 
  <view class="section-textt">"}} 
  <view class="title"><text>{{item.title}}</text></view> 
  <view class="subTitle"><text>{{item.subTitle}}</text></view> 
 </view> 
 </view> 
</template> 

هنا فقط تم إضافة طريقة النقر إلى القائمة أدناه

كود النقر على القائمة جي إس

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=المعلمات من الصفحة السابقة'}) 
 } 

حيث

wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=المعلمات من الصفحة السابقة'})　

للانتقال، id هو المعلمات التي يجب نقلها إذا كانت المعلمات ديناميكية، فالكود كالتالي:　

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) 
 } 

حيث p هو القيمة المحددة لكل سطر أعلاه كـ id

كود الحصول على القيمة في الصفحة التالية كالتالي:　

 data:{ 
 // text:"هذه هي الصفحة" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // إعداد الصفحة options هي المعلمات المقدمة من الانتقال إلى الصفحة 
 this.setData({ 
 title:options.id 
 ) 

ثم عرض الكود على الصفحة كما يلي:

<view>{{title}}</view>　

نتيجة التنفيذ النهائي:

شكراً على القراءة، آمل أن تكون مفيداً للجميع، شكراً لدعمكم لموقعنا!