微信小程序细节
微信小程序开发几个细节:
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 ...
随机推荐
- vmware相关设置
vmware虚拟机和宿主机共享文件夹 点击“虚拟机”->“设置” 进入之后,选择“选项”选项卡->选择“共享文件夹”(此处已启用实在安装VMware Tools时选择了启用共享文件夹功能) ...
- .Net拾忆:Asp.net请求管道
w3wp.exe应该很熟悉,调试应用时候附加到进程就是这个服务:w3wp.exe和应用池相关联,每个应用池会有一个w3wp; 一.Http请求到iis应用池 IIS 5.x iis运行在inetinf ...
- Amber TUTORIAL B1: Simulating a DNA polyA-polyT Decamer
Section 1: Introduction The input files required (using their default file names): prmtop - a file c ...
- ida脚本学习
#!/usr/bin/env python #coding:utf-8 from idc import * import idaapi import idautils import os os.sys ...
- myeclipse修改了安装目录名字打不开解决方法
在MyEclipse XX目录下有一个MyEclipse.ini的文件,里面既有相对路径,又有绝对路径,修改绝对路径指向新的位置即可 来源:http://www.iteye.com/problems/ ...
- What is the reason for - java.security.spec.InvalidKeySpecException: Unknown KeySpec type: java.security.spec.ECPublicKeySpec
支付中心Project重构完成,经过本地测试,并未发现问题.发布到测试环境后,测试发现请求光大扫码https接口时,出现了如下的异常: javax.net.ssl.SSLException: Serv ...
- 封装及调用fetch
一.封装fetch 创建fetch/index.js import 'whatwg-fetch' import 'es6-promise' export function get(url) { let ...
- es6函数的扩展
扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 扩展运算符的应用 (1)合并数组 // ES5 [1, 2].co ...
- expect简介和使用例子
expect简介和使用例子 expect简介 expect是一款自动化的脚本解释型的工具. expect基于tcl脚本,expect脚本的运行需要tcl的支持. expect对一些需要交互输入的命 ...
- winform下picturebox控件显示图片问题
viewData_pictureBox.SizeMode=PictureBoxSizeMode.StretchImage;图片会自动按照比例缩放来完全显示在你的PictureBox中.