小编给大家分享一下小程序开发的难点分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司专注于中大型企业的网站设计、做网站和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户千余家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！
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
商品介绍
规格参数
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以上是“小程序开发的难点分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享名称：小程序开发的难点分析
浏览路径：
http://csdahua.cn/article/ihihso.html
