前端面试小结(5)

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

1、navigateTo:(打开新页面)保留当前页(隐藏),跳转到指定页
wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页面。

2、redirectTo:(页面重定向)关闭当前页(卸载),跳转到指定页
wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
3、navigateBack:页面返回
wx.navigateBack 或使用组件 <navigator open-type="navigateBack">
4、switchTab:(Tab 切换)只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换
wx.switchTab 或使用组件 <navigator open-type="switchTab "/>

5、wx.reLanch:(Tab 切换) 关闭所有页面,打开到应用内的某个页面
wx.reLaunch 或使用组件 <navigator open-type="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:
<view bindtap=“touch” data-id="{{id}}"></view> //{{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页面(参数多时可用“&”)
<navigator url='../index/index?id=1&name=aaa'></navigator>
或者添加点击事件,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文件里引入

 <import src="../../wxParse/wxParse.wxml"/>
 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容