微信小程序开发几个细节:
1.界面传值
①全局参数传值
<!--结果--> <view wx:for="{{data}}" class="case pr"> <image class="pic" src="http://www.jinhuang.com{{item.Thumbnails}}" mode="aspectFill" data-Type="{{item.Type}}" data-Style="{{item.Style}}" data-Area="{{item.Area}}" data-gid="{{item.ID}}" data-src="http://www.jinhuang.com{{item.Thumbnails}}" bindtap="goToDetaile"></image> <view class="title ellipsis">{{item.Title}}</view> <view class="tag ellipsis">{{item.Type}} | {{item.Area}} | {{item.Style}}</view> <view class="headPic pa" bindtap="goToDesigner" data-did="{{item.ID}}"> <image src="{{item.ID}}"></image> <text class="ellipsis tc"></text> </view> </view> 通过绑定触发事件到:goToDetaile var app=getApp(); //跳转案例详情 goToDetaile:function(event){ app.globalData.caseId =event.currentTarget.dataset.gid; app.globalData.data = event.currentTarget.dataset; wx.navigateTo({ url: '../detaile/detaile' }); },
②界面传值
<view class="item-view" wx:for="{{videoDataList}}" wx:for-item="item" wx:key="item.ID"> <navigator url="detaile/detaile?id={{item.ID}}"> <template is="mainTabCell" data="{{item}}" /> </navigator> </view> 跳转到详情页面: 在触发OnLoad事件时候传入options值 onLoad: function (options) { //初始化数据 this.getData(options); }, //加载数据 getData: function (callback) { var self = this; wx.showToast({ title: '加载中...', icon: 'loading', duration: 10000 }); wx.request({ url: "https://0to9.top/api/article/" + callback.id, header: { 'Content-Type': 'application/json' }, success: function (res) { WxParse.wxParse('article', 'html', res.data.Data.Content, self, 5); self.setData({ data: res.data.Data }); wx.hideToast(); } }) },
2.请求数据
wx.request({ url: "https://0to9.top/api/article/" + callback.id, header: { 'Content-Type': 'application/json' }, success: function (res) { WxParse.wxParse('article', 'html', res.data.Data.Content, self, 5); self.setData({ data: res.data.Data }); wx.hideToast(); }
3.全局值使用,当前页面值使用
app.globalData.caseId =event.currentTarget.dataset.gid;
4.HTML数据展示
<import src="../../../wxParse/wxParse.wxml" /> <view class="detaile bg_f mt35 border_t border_b"> <view class="content w mt40 border_t"> <view class="wxParse"> <template is="wxParse" data="{{wxParseData:article.nodes}}" /> </view> </view> </view> onLoad: function (options) { //初始化数据 this.getData(options); }, //加载数据 getData: function (callback) { var self = this; wx.showToast({ title: '加载中...', icon: 'loading', duration: 10000 }); wx.request({ url: "https://0to9.top/api/article/" + callback.id, header: { 'Content-Type': 'application/json' }, success: function (res) { WxParse.wxParse('article', 'html', res.data.Data.Content, self, 5); self.setData({ data: res.data.Data }); wx.hideToast(); } }) },
载入js,转换文本内容成json格式,在展示层通过模板绑定数据。
5.https,ssl2.0问题解决
https:https://www.pianyissl.com/ 免费3个月https证书,在iis中导入证书绑定即可。
ssl2.0 :下载 tls 1.2.reg ,直接电脑双击使用
6.关于MVVM模式研究(开元装饰demo)