微信小程序模板里面如何使用函数

简介: 微信小程序模板里面如何使用函数

模板文件为:wuliu.wxml

代码如下:

<view class="nav">

   <view class="fanhui" bindtap="showBack">

       <image src="../images/fanhui.png"></image>

   </view>

   <view class="top">快递轨迹</view>

</view>

<wxs module="fun1">

   var str2json = function (str) {

       //console.log("页面内部函数执行了!")

       return JSON.parse(str);

   }

   module.exports.str2json = str2json;

</wxs>


<!-- 外层pages -->

<view class='pages'>


   <!-- 头部 -->

   <view wx:if="{{list.length!=0}}" wx:for="{{list}}" wx:for-item="list" wx:key="yy">

       <view class='head'>

           <label class='head_title'>{{list.DeliveryName}}:{{list.DeliveryNum}}</label>

       </view>

       <!-- 追踪 -->

       <view class='logisit' wx:if="{{fun1.str2json(list.show_value).length!=0}}" wx:for="{{fun1.str2json(list.show_value)}}" wx:for-item="list1" wx:key="qq">

           <!-- 列表 -->

           <view class='list'>

               <view class='list_name_page'>

                   <!-- 列表名称 -->

                   <lable class='list_name'>{{list1.context}}</lable>

               </view>

               <!-- 时间 -->

               <view class='list_dates_page'>{{list1.time}}</view>


           </view>

           <!-- 列表底线 -->

           <view class='writes'></view>

       </view>


       <view wx:if="{{fun1.str2json(list.show_value).length==0}}" class="no_dingdan" style="margin-top:30px;">

           <view style="margin-top:50rpx">暂无轨迹信息!</view>

       </view>



   </view>


   <view wx:if="{{list.length==0}}" class="no_dingdan" style="margin-top:30px;">

       <image src="/pages/images/luojitu.png"></image>

       <view style="margin-top:50rpx">暂无快递信息!</view>

   </view>


</view>

上述案例是,模板里面两层的循环,第二层要被循环的是个json字符串,要先把他转化成json对象,然后才能在内层继续循环。如上图红色部分,函数被定义在<wxs>标签内。

相关文章
|
27天前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
72 8
|
3月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
97 4
|
3月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
132 1
|
3月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
152 0
|
6月前
|
小程序
同城拼车社交微信小程序模板源码
同城拼车社交微信小程序模板源码
97 6
|
6月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
135 4
|
6月前
|
小程序 前端开发
网络祭祀人物微信小程序模板源码
网络祭祀人物微信小程序模板源码
63 5
|
6月前
|
小程序
医院门诊预约挂号小程序模板源码
医院门诊预约挂号小程序模板源码
64 4
|
6月前
|
小程序
乐器培训课程报名小程序模板源码
乐器培训课程报名小程序模板源码
46 3
|
6月前
|
小程序 前端开发
手机租房房源小程序模板源码
手机租房房源小程序模板源码
151 4