微信小程序的路由跳转方法
1、navigateTo:(打开新页面)保留当前页(隐藏),跳转到指定页
wx.navigateTo 或使用组件
保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页面。
2、redirectTo:(页面重定向)关闭当前页(卸载),跳转到指定页
wx.redirectTo 或使用组件
3、navigateBack:页面返回
wx.navigateBack 或使用组件
4、switchTab:(Tab 切换)只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换
wx.switchTab 或使用组件
5、wx.reLanch:(Tab 切换) 关闭所有页面,打开到应用内的某个页面
wx.reLaunch 或使用组件
tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
微信小程序相对单位
rpx:rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
微信小程序实现传参数的几种方法
1、微信小程序中wxml中用data-id传数据
wxml:
需要注意的是,这里的data-后面的值是不区分大小写的。获取值是只能用小写获取,页面传值大小写不作区分
js:
touch:function(e){
var id = e.target.dataset.id;
console.log(id);
}
e.currentTarget 代表的是,注册了监听点击事件的组件。在本例中,就是外层的View(包含了两个TextView).
e.target 代表的是,实际触发了点击事件的组件。(因为注册点击监听事件的组件,是整个外层View,点击View中的任何部位,都会触发View注册的方法)
2、navigator 跳转时
wxml页面(参数多时可用“&”)
或者添加点击事件,js用navigateTo跳转传参,两种效果一样
wx.navigateTo({
url: '../index/index?id=1&name=aaa',
})
js页面 在onLoad里直接获取
onLoad: function (options) {
//页面初始化 options为页面跳转所带来的参数
var id = options.id //获取值
},
小程序优劣势
小程序优点:
1、方便快捷,即用即走。
不需要再下载什么APP啦,既费流量,又占空间内存。小程序就是方便,即用即走。
2、速度快、不占内存
因为小程序前端代码都是存在微信服务器上的,在腾讯云端存放呢,所以无需加载,直接就打开了,速度也比较快。并且还不占用手机内存。
3、安全稳定、保密性强
其实小程序就类似苹果商店,首先需要审核才能发布。其次小程序通信采用的是https访问,SSL加密通信,并且小程序样式代码都封装在微信小程序里面,所以安全性更高,更稳定。
4、功能丰富,场景丰富
可以调用比H5更多的手机系统功能来进行开发,例如GPS定位、录音、拍视频、重力感应等,能开发更丰富的使用场景。
5、开发成本低、维护简便
同样的功能,做一个APP估计需要十几万甚至几十万,而开发一个小程序,一般几千元就搞定了。维护起来也比较简单方便。
6、附近定位、入口众多
开放的入口比较多,除了通过扫码,发送朋友,搜索,附近等常用入口外,还能与公众号关联,群发文章嵌入,公众号菜单链接等。
小程序缺点:
1、微信小程序只有1M的大小,这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。
2、小程序的技术框架还不稳定,开发方法时常有修改,导致短时间内经常要升级维护,或许这能解析为什么小程序只能1M大小,怕部署太大型的项目会出大问题。
3、不能直接分享到朋友圈,哎呀,少了一个重要的推广方式。
4、需要像APP一样审核上架,这点比HTML5即做即发布要麻烦些
微信小程序 解析html格式内容
1.首先在github上下载wxParse
当的路径:https://github.com/icindy/wxParse
2.把下载下来的文件夹里的wxParse文件复制到小程序项目下
3.开始操作
1)在app.wxss文件中,引入wxParse的样式表
@import "/page/wxParse/wxParse.wxss";
2)在需要解析html内容的页面对应的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');
3)通过调用WxParse.wxParse方法来设置html内容
WxParse.wxParse(bindName , type, data, target,imagePadding)
1.bindName绑定的数据名(必填)
2.type可以为html或者md(必填)
3.data为传入的具体数据(必填)
4.target为Page对象,一般为this(必填)
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
4) 在解析的文件对应的js文件里面写入:
Page({
data: {
},
onLoad: function () {
var that = this;
wx.request({
url: '',
method: 'POST',
data: {
'id':13
},
header: {
'content-type': 'application/json'
},
success: function(res) {
var article = res.data[0].post;
WxParse.wxParse('article', 'html', article, that,5);
}
})
}
})
在解析的文件的wxml文件里引入