微信小程序细节
微信小程序开发几个细节:
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)
微信小程序细节的更多相关文章
- 微信小程序资源整理
微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 微信小程序教程汇总
目前市面上在内测期间出来的一些实战类教程还是很不错的,主要还是去快速学习小程序开发的整体流程,一个组件一个组件的讲的很可能微信小程序一升级,这个组件就变了,事实本就如此,谁让现在是内测呢.我们不怕,下 ...
- 微信小程序常见问题集合(长期更新)
最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题 跳坑指南<七十>如何让微信小程序服务类目审核通过 跳坑六十九: ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 浅谈微信小程序对于创业者,意味着什么?
尽管这个话题,有点儿烂大街,然而作为开发者兼创业人,兹以为很有必要为自己梳理一番. 多年前,当萌生创业的念头时,我是这样在脑海里绘制这幅蓝图的: 我需要一个域名,一个服务器,并且备了案. 我需要至少一 ...
- 微信小程序(应用号)资源汇总整理
微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...
- 国内首个微信小程序开发者社区www.mntuku.cn
微信小程序开发者社区-微信小程序开发教程-微信小程序最新资讯 - www.mntuku.cn .本站作为专业的微信小程序开发者社区为大家提供:微信小程序开发者交流平台,微信小程序开发教程,微信小程序定 ...
- 微信小程序(应用号)开发资源汇总整理 - 一直更新中
开源项目 wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO ...
随机推荐
- Hadoop2.6的DataNode启动不了
2016-05-04 18:14:51,990 INFO org.apache.hadoop.ipc.Server: IPC Server Responder: starting 2016-05-04 ...
- kdeplot(核密度估计图) & distplot
Seaborn是基于matplotlib的Python可视化库. 它提供了一个高级界面来绘制有吸引力的统计图形.Seaborn其实是在matplotlib的基础上进行了更高级的API封装,从而使得作图 ...
- 学习笔记 python 面向对象学习
封装: 封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 继承: 继承是指这样 ...
- python更新zip文件中文件
#更新zip文件中某一个文件import os import shutil import tempfile import zipfile from rat_tool.pack import * too ...
- CSS3实现GIF动画
来自 dribbble 某位大师的作品,GIF图中一个小女孩抱着一只猫在跑步,非常可爱,动作轻巧,过渡自然.DEMO下载 回到项目需求,要实现类似上图卡通人物跑步动画,分析结果如下: 1.跑步动画可以 ...
- [1]windows 内核情景分析---说明
本文说明:这一系列文章(笔记)是在看雪里面下载word文档,现转帖出来,希望更多的人能看到并分享,感谢原作者的分享精神. 说明 本文结合<Windows内核情景分析>(毛德操著).< ...
- kali linux wifi破解(aircrack)
需要一个能监听的网卡 airmon-ng start wlan0(監聽網卡) airmon-ng check kill(清除其他有影响的環境) airodump-ng mon0 (掃描附近wifi) ...
- POJ1944 Fiber Communications (USACO 2002 February)
Fiber Communications 总时间限制: 1000ms 内存限制: 65536kB 描述 Farmer John wants to connect his N (1 <= N ...
- STL之List容器
1.List容器 1) list是一个双向链表容器,可高效地进行插入删除元素. 2)list不可以随机存取元素,所以不支持at.(pos)函数与[]操作符.It++(ok) it+5(err) 3)头 ...
- HighCharts插件学习(二)
HighCharts属性 credits: {版权信息} data: {数据功能模块} drilldown: {钻取} exporting: {导出} labels: {标签} legend: ...