微信小程序细节

微信小程序开发几个细节：

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）