前端面试小结(5)

微信小程序的路由跳转方法

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物理像素


单位换算.png

微信小程序实现传参数的几种方法

1、微信小程序中wxml中用data-id传数据

wxml:
//{{id}}这里的id为js里面设置的数据;
需要注意的是,这里的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文件里引入