小编给大家分享一下小程序开发的难点分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
1、小程序 生成二维码
小程序生成二维码 小程序生成二维码其实是需要后端调用,然后前端调用后端接口即可。
在下面的例子中,我们传给后端scene就是额外参数(长度最大为32个字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符请自行编码为合法字符),在打开的小程序用到的。
let scene = 't=3&n='+ this.inputVal+'&sale='+this.saleId; request(qcode,{isHyaline:false,qrcodeType:2,scene:scene,width:255,color:{r:'255',g:'255',b:'255'}}) .then(res=>{}) })
这里的坑在于前端如何获取用户通过扫二维码如何获取参数
onLoad(opts){ var scene = decodeURIComponent(opts.scene); // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene }
2、小程序 跳小程序
小程序调用toMiniProgram,我这里做了个简单的封装
function toMiniProgram(appid, path, extraData) { wx.navigateToMiniProgram({ appId: appid, // 要打开的小程序 appId path: path, // 打开的页面路径 envVersion: 'develop', //要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。 extraData: extraData, // 需要传递给目标小程序的数据 success: function (res) { console.log('打开成功') }, fail: function (res) {} }) }
在页面中使用
toMiniProgram('appid','pages/customer/goods-detail?id='+id+'&saleId='+this.saleId,{});
在另一个小程序中获取参数
onLoad(opts){ this.goodsId=opts.id this.saleId=opts.saleId }
3、吸顶效果的实现
吸顶效果的原理是将滚动到一定高度的tab 重新布局为fixed
html
<view class="tab-ctn"> <view class="tabs flex flex-justify {{isTabFixed?'fixed':''}}" id="tabs"> <view class="item pr {{tabIndex===0?'on':''}}" @tap="toggleTab(0)">商品介绍</view> <view class="item pr {{tabIndex===1?'on':''}}" @tap="toggleTab(1)">规格参数</view> </view> </view>
css
.tabs{ padding:0 176rpx; font-size:30rpx; height:90rpx; border-bottom:0.5px solid #E4E4E4;} .item{ height:100%; position:relative; padding-top:20rpx; color:#999; &.on{ color:#FD343B; font-weight:bold; } } .fixed{ position:fixed; top:0; left:0; right:0; z-index:9; }
js
data={ detailTopH:300, } onLoad(){ this.getElHeight('') // tab上面元素的高度 } /**封装根据id获取元素高度 */ getElHeightById(id){ return new Promise(function(resolve,reject){ const query = wx.createSelectorQuery() query.select('#'+id).boundingClientRect() query.selectViewport().scrollOffset() query.exec(function (res) { resolve(res[0].height) }) }) } // 调用 getElHeight(id){ this.getElHeightById(id).then(res=>{ this.detailTopH = res }) } /**监听页面滚动事件 */ onPageScroll(e){ if(e.scrollTop>=this.detailTopH && !this.isTabFixed){ this.isTabFixed=true }else if(e.scrollTop<=this.detailTopH && this.isTabFixed){ this.isTabFixed=false } }
4、封装时间戳
function formatTime(timestamp, type = "date") { var date = new Date(timestamp); 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 [year, month, day].map(formatNumber).join('-'); } else if (type == "all") { return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':') } else if (type == "time") { return [hour, minute, second].map(formatNumber).join(':') } else if (type == "time2") { return [hour, minute].map(formatNumber).join(':') } else if (type == 'month') { return [month, day].map(formatNumber).join('-'); } } /**niu 封装时间戳格式化辅助,将年月日先转为字符串,再判断是否加0*/ function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } formatTime(1236547891,'all') // 2019-11-02 03:11:11 formatTime(1236547891,'time') // 03:11:22 formatTime(1236547891,'time2') // 03:11 formatTime(1236547891,'month') // 03-03 formatTime(1236547891,'date') // 2019-11-02
以上是“小程序开发的难点分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。