微信小程序项目功能要点总结

一、转发分享

<button   open-type="share" hover-class='none' plain="true">分享button>

onShareAppMessage: function() {if (res.from === 'button') {// 来自页面内转发按钮}return {title: "分享",path: '/pages/index/index'}}

如果用mpvue写的换一定不要放到methods里面

		methods: {},onShareAppMessage: function(res) {if (res.from === 'button') {// 来自页面内转发按钮}return {title: "分享",path: '/pages/detail/main?pid=' + this.LoginInfoId }},

去掉微信button的外边框，border：none；等都不起作用，亲测唯有此法如下：

		button::after{border:none;}

二、设置系统剪贴板的内容，如复制微信号

<div class="btn" @click="cope_fn"><text selectable='true' >点击复制客服微信text>  
div>

cope_fn() {wx.setClipboardData({data: '要复制的内容',success: function(res) {wx.showToast({title: "客服微信号已复制成功",icon: 'none', //隐藏微信弹框组件默认的对号duration: 1500,mask: true});}});
}

三、input输入字数监控和限制

<input type="text" name="title" id="title" v-model="title" maxlength="15" @input='limitWord'><span class="warning_span" v-show="over_num">*标题最多只能输入15个字span>

limitWord: function(e) {let text_num=e.mp.detail.cursorif(text_num>=15){this.over_num = true;let warn1 = setInterval(() => {this.over_num=false;clearInterval(warn1);}, 2000);}
},

四、微信小程序支付
关于微信支付接口列表看起来有些复杂，不过对于前端而言到没有什么支付签名的问题。统一下单API等皆由后端调取，最后前端只调下面这个微信API，而且所有参数皆有后端生成订单的接口返回。

wx.requestPayment({timeStamp: '',nonceStr: '',package: '',signType: '',paySign: '',success (res) { },fail (res) { }
})

成功支付之后，建议在回调一下后端的支付查询接口，避免出现微信支付成功，而后端订单没有成功的情况。
五、下拉刷新列表
.json配置

{"enablePullDownRefresh": true,"backgroundTextStyle":"dark"
}

	onPullDownRefresh: function() {wx.showNavigationBarLoading(); //在标题栏中显示加this.getList();let that = thissetTimeout(function() {wx.hideNavigationBarLoading(); //完成停止加载wx.stopPullDownRefresh(); //停止下拉刷新that.ShowWarn0 = true;that.msg = '刷新成功';  //弹框刷新成功that.showClose();}, 1000);},

六、加载分页列表

下策： 滚动到底部加载分页列表
如果需要展示分页的最外层是定位到页面的，触底事件不可用时，使用

	onPageScroll: function(e) {if (e.scrollTop <= 0) {// 滚动到最顶部e.scrollTop = 0;} else if (e.scrollTop > this.scrollHeight) {// 滚动到最底部this.get_pages();  //此处可加载分页e.scrollTop = this.scrollHeight;}if (e.scrollTop > this.scrollTop || e.scrollTop >= this.scrollHeight) {//向下滚动} else {//向上滚动 }this.scrollHeight = e.scrollTop},

上策: 页面上拉触底事件的处理函数，分页

  /*  该页面.json   */
{"navigationBarTitleText": "列表页","onReachBottomDistance": 50,    //不可少"enablePullDownRefresh": true,"usingComponents": {}
}

  /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {/*  加载分页 */},

七、联系客服会话

<button open-type="contact" @contact="handleContact"  hover-class='none' plain="true">客服回话</button>
//或原生<button open-type="contact" bindcontact="handleContact"  hover-class='none' plain="true">客服回话</button>

handleContact(e) {console.log(e)
}

八、阻止弹框，点击事件穿透
情况一、弹框没有滚动事件

<view class="search_modal_bg" catchtouchmove="touchHandler">view >

touchHandler() {return;
},

或者

<view class="box" catchtouchmove="return"> 
//略
view>

情况二、若弹框也有滚动事件，点击这里

九、订阅消息

<button  bindtap="warning_set">开播提醒button>

	warning_set() {let that=thiswx.requestSubscribeMessage({tmplIds: ['必填'],success (res) {}})},

十、scroll-view 隐藏滚动条

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！