小程序开发的难点分析

　　介绍

小编给大家分享一下小程序开发的难点分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

1,小程序生成二维码

小程序生成二维码小程序生成二维码其实是需要后端调用,然后前端调用后端接口即可。

在下面的例子中,我们传给后端场景就是额外参数(长度最大为32个字符,只支持数字,大小写英文以及部分特殊字符:! # $,& # 39;()* +,/:;=? @ -._ ~,其它字符请自行编码为合法字符),在打开的小程序用到的。

,,,,let  scene =, & # 39; t=3, n=& # 39; +, this.inputVal + & # 39;及销售=& # 39;+ this.saleId; 　　,,,请求(qcode, {isHyaline:假的,qrcodeType: 2,场景:场景,宽度:255年,颜色:{r: & # 39; 255 & # 39;, g: & # 39; 255 & # 39;, b: & # 39; 255 & # 39;}}) 　　,,,,,不要犹豫(res=在{}) 　　,,,})

这里的坑在于前端如何获取用户通过扫二维码如何获取参数

,,onLoad(选择){ 　　,,,var  scene =, decodeURIComponent (opts.scene);,//, scene 需要使用,decodeURIComponent 才能获取到生成二维码时传入的,场景 　　,,,, 　　以前,,}

2,小程序跳小程序

小程序调用toMiniProgram,我这里做了个简单的封装

function  toMiniProgram (appid、,路径,extraData), { 　　wx.navigateToMiniProgram({才能 　　,,,appId:, appId,,,//,要打开的小程序,appId 　　,,,路径:,,,,,//,打开的页面路径 　　,,,envVersion:, & # 39;开发# 39;,,,//要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。 　　,,,extraData:, extraData,,,//,需要传递给目标小程序的数据 　　成功,,,:,function  (res), { 　　,,,,,console.log(& # 39;打开成功& # 39;) 　　,,,}, 　　,,,失败:,function  (res), {} 　　})才能 　　}

在页面中使用

,toMiniProgram (& # 39; appid& # 39; & # 39;页面/客户/goods-detail ? id=& # 39; +身份证+ & # 39;,saleId=& # 39; + this.saleId, {});

在另一个小程序中获取参数

onLoad(选择){ 　　,,,this.goodsId=opts.id 　　,,,this.saleId=opts.saleId 　　}

3,吸顶效果的实现

吸顶效果的原理是将滚动到一定高度的标签重新布局为固定html

& lt; view 类=皌ab-ctn"比; 　　& lt;才能view 类=皌abs  flex  flex-justify  {{isTabFixed ? & # 39;固定# 39;:& # 39;& # 39;}}“,id=皌abs"比; 　　,,,& lt; view 类=癷tem  pr  {{tabIndex===0 ? & # 39;在# 39;:& # 39;& # 39;}}“,@tap=皌oggleTab(0)“在商品介绍& lt;/view> 　　,,,& lt; view 类=癷tem  pr  {{tabIndex===1 ? & # 39;在# 39;:& # 39;& # 39;}}“,@tap=皌oggleTab(1)“祝辞规格参数& lt;/view> 　　& lt;才能/view> 　　& lt;/view> css

.tabs{填充才能:0,176 rpx; 　　,,,,,,,字体大小:30 rpx; 　　,,,,,,,身高:90 rpx; 　　,,,,,,,边界底部:0.5 px  solid  # E4E4E4;} 　　.item { 　　,,,身高:100%; 　　,,,位置:相对; 　　,,,padding-top: 20 rpx; 　　,,,颜色:# 999; 　　,,,,内用{ 　　,,,颜色:# FD343B; 　　,,,粗细:大胆的; 　　,,,} 　　} 　　.fixed { 　　,,,位置:固定; 　　,,,:0; 　　,,,左:0; 　　,,,右:0; 　　,,,z - index: 9; 　　}

js

data=https://www.yisu.com/zixun/{ 　　detailTopH: 300, 　　} 　　onLoad () { 　　this.getElHeight(")//选项卡上面元素的高度 　　}/* *封装根据id获取元素高度*/getElHeightById (id) { 　　返回新的承诺(函数(解决,拒绝){ 　　const查询=wx.createSelectorQuery () 　　query.select (' # ' + id) .boundingClientRect () 　　.scrollOffset query.selectViewport () () 　　查询exec(函数(res) { 　　解决(res [0] .height) 　　}） 　　}） 　　}//调用 　　getElHeight (id) { 　　this.getElHeightById (id) (res=> { 　　this.detailTopH=res 　　}） 　　}/* *监听页面滚动事件*/onPageScroll (e) { 　　如果(e.scrollTop>=this.detailTopH & & ! this.isTabFixed) { 　　this.isTabFixed=true 　　}else if (e.scrollTop <=this.detailTopH & & this.isTabFixed) { 　　this.isTabFixed=false 　　} 　　}

4封装时间戳

function  formatTime(时间戳,type =,“date"), { 　　var 才能;date =, new 日期(时间); 　　var 才能;year =, date.getFullYear () 　　var 才能;month =, date.getMonth (), + 1 　　var 才能;day =, date.getDate () 　　, 　　var 才能;hour =, date.getHours () 　　var 才能;minute =, date.getMinutes () 　　var 才能;second =, date.getSeconds () 　　if 才能;(type ==,“date"), { 　　,,,return (年,月,日). map (formatNumber) . join (& # 39; & # 39;); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

小程序开发的难点分析