WordPress小程序教程

模板兔提供专业的wordpress小程序开发教程,教你快速入门wordpress小程序制作。

WordPress小程序教程:最近模板兔在给客户开发小程序时遇到一个需求就是某些图片万一加载失效了,为了不影响整体显示美观,需求设置一张默认的图片来替换掉,那么如何实现呢? 其实小程序的image控件是可以通过判断图片是否加载失败来设置回调函数的,那就是参数binderror,可设置binderror=“bindImageError”。 bindImageError(e) {     var that = this     that.setData({       ['prices.videos['+e.currentTarget.dataset.index+'].image']: that.data.meta.thumb     })   } 以上代码仅供一个简单的参考。

WordPress小程序教程:我们在开发微信小程序时往往会遇到需要刷新当前页面,一般是用that.noLoad,但是模板兔建议用that.onShow。 首先在app.js里定义一个全局变量userBackFlush为0,然后在页面js的onshow里对userBackFlush做判断来重新加载。 onShow里面的判断代码 if(app.globalData.userBackFlush == 1){     app.globalData.userBackFlush = 0 } 执行刷新页面前的代码 app.globalData.userBackFlush = 1 that.onShow();

WordPress小程序教程:由于目前很多手机的屏幕边缘都是有弧度的比如iPhone,那么我们在微信小程序里底部固定一个购买按钮时就有可能会被弧度遮挡影响体验,那么如何适配这个弧度的安全距离呢? 苹果官方推荐使用env(),constant()来适配,建议使用该方案,不需要管数值具体是多少。这2个方法是什么呢? env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量: safe-area-inset-left:安全区域距离左边边界的距离 safe-area-inset-right:安全区域距离右边边界的距离 safe-area-inset-top:安全区域距离顶部边界的距离 safe-area-inset-bottom :安全距离底部边界的距离 因为目标是需要对底部小黑条做适...

WordPress小程序教程:我们在开发wordpress微信小程序的过程中必定会遇到这样一个问题,那就是读取文章内容时会带有一些p标签或者h3这样的标签,但是在小程序端这些是无法被识别的,那么如何去掉这些html标签呢? that.setData({ title:res.data.title, content: res.data.content.replace(/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi, '\n').replace(/<br\/?>/gi, '\n').replace(/<[^>/]+>/g, '').replace(/(\n)?<\/([^>]+)>/g, '').replace(/\u00a0/g, ' ').replace(/&nbsp;/g, ' ').replace(/<\/?(img)[^>]*>/gi, '').replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&...

WordPress小程序教程:最近模板兔在给某个客户开发小程序,其中需要一个功能就是页面滑动到某个导航时需要导航固定在页面顶部,那么如何实现呢? 我们首先需要知道这个导航距离顶部的距离,这样才能判断是否滑到了此处。 在onload的时候执行that.queryMultipleNodes();这个方法如下: queryMultipleNodes: function (e) {     var that = this     var query = wx.createSelectorQuery()     query.select('#filters').boundingClientRect()     //query.selectViewport().scrollOffset()     query.exec(function (res) {       //console.log(res[0].top)       // 节点的上边界坐标       //console.log(res[1].scrollTop) // 显...

WordPress小程序教程:在开发微信小程序时会,可能会需要做一个用户推广的功能,一种方式是直接分享小程序给好友或朋友圈,另一种方式就是生成专属推广的小程序二维码,那么如何实现呢?下面模板兔给出一个简单的示例代码供大家参考。 服务端代码: $appid = get_option("erphpapp_appid"); $appsecret = get_option("erphpapp_appsecret"); $userid = $_POST['userid']; $json = erphpapp_http("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret"); $json = json_decode($json,true); $ACCESS_TOKEN = $json['access_token']; $param = json_encode(array("page"=>"pages/index/index...

WordPress小程序教程:WordPress小程序开发如何实现微信授权登录呢?下面模板兔给出简单的代码: 小程序端js: wx.login({ success: function (res) { if (res.code) { wx.request({ url: app.globalData.appUrl, data: { code: res.code, }, method: 'POST', header: { //'content-type': 'application/json' 'content-type': 'application/x-www-form-urlencoded' }, success: function (res2) { wx.hideToast(); console.log(res2.data); if (res2.data.errCode == '0'){ wx.setStorageSync('UserId', res2.data.id); wx.setStorageSync('UserUnionId', res2.data.unionid); that.setData({ userId: res2.data.id, userAvatarUrl: res...

WordPress小程序教程:防盗链相信大家都不陌生了,就是防止别人滥用我们自己的图片,一般可以添加网站域名白名单即可,但是在小程序里,我们如果开防盗链呢? 其实小程序也是有域名访问的,通过查看网站日志发现小程序请求时的URL来源是https://servicewechat.com/wx*****/13/page-frame.html,所以得知微信小程序的域名是servicewechat.com,所以将此域名也加入白名单即可。 我们在进行小程序开发的时候,接口中的图片如果实现了防盗链,那么可能图片无法显示。 如果不防盗链的话,万一被人抓取了接口,直接使用了我们的图片,那么大量的流量将被使用。 所以我们要给小程序开启白名单,让图片在小程序中能够正常显示。

WordPress小程序教程:最近模板兔在给一个客户做小程序里的支付,基于erphpdown插件的功能,小程序里实现微信支付升级VIP。 整个流程 1.打开某小程序,点击直接下单。 2.wx.login获取用户临时登录凭证code,发送到后端服务器换取openId。 3.在下单时,小程序需要将购买的商品Id,商品数量,以及用户的openId传送到服务器。 4.服务器在接收到商品Id、商品数量、openId后,生成服务期订单数据,同时经过一定的签名算法,向微信支付发送请求,获取预付单信息(prepay_id), 同时将获取的数据再次进行相应规则的签名,向小程序端响应必要的信息。 5.小程序端在获取对应的参数后,调用wx.requestPayment()发起微信支付,唤醒支付工作台,进行支付。 6.接下来的一...

WordPress小程序教程:我们在做微信小程序的时候往往需要传值给某个页面,可能有些情况不需要传值,那么如何判断是否有传值呢? WP小程序里判断undefined不能通过typeof来判断,而是直接options.aff != undefined,undefined不用加引号,直接这么用: if(options.aff != undefined){       wx.setStorageSync('AffId', options.aff); }

WordPress小程序教程:data里面有个多维数组,当我们想更新数组里某一列的某一个值时,可以这样使用: changeItemInArray: function() { // 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好 this.setData({ 'array[0].text':'changed data' }) }, 上面仅针对与静态[0]有效,那假如array[0].text里的这个角标0是动态值该怎么办呢? 设置数据时key需要使用中括号[]将其括起来,就是这样 changeItemInArray: function(e) { var index = e.currentTarget.dataset.index this.setData({ ['array['+index+'].text']:'changed data' }) }, 以上就是模板兔给大家讲解修改数组某一项值的全部内容。

WordPress小程序教程:微信小程序的checkbox相比网页的checkbox有点不一样,获取多选的值会麻烦点,因为小程序没法通过js的选中事件直接获取反馈,只能通过绑定data来获取。 模板兔下面给一个示例代码,希望对你有所帮助。 wxss文件部分 .qualitys{background:#202020;padding:10px;overflow: hidden;margin-bottom: 20px;border-radius: 5px;} .qualitys .k-item{width: 25%;float: left;font-size:14px;margin-bottom: 6px;} .qualitys .k-item checkbox .wx-checkbox-input{width: 25rpx; height: 25rpx; border-radius: 3px;position: relative;top: -1.5px} .qualitys .k-item checkbox .wx-checkbox-input.wx-checkbox-input-checked{width...

WordPress小程序教程:今天模板兔在给客户开发WordPress小程序时需要弄一个清空input的输入内容的按钮,那么如何清空微信小程序input的value内容呢? 小程序是不支持js来处理value的值的,只能通过绑定一个动态值给value,我们清空这个动态值即可。 <view class="input-wrap">       <input class="input" value="{{inputDefault}}" placeholder="多个关键字以英文逗号拼接" bindconfirm="bindInputConfirm" bindblur="bindInputBlur" />       <icon class="icon-small" type="cancel" size="20" color="#fff" bindtap="bindInputClear"></icon> </view> bindInputClear: function(e){     var that = thi...

WordPress小程序教程:WordPress小程序开发时如何自定义select下拉框组件呢?模板兔给大家讲解一下。当然,你可以使用自带的picker组件,如果想自定义,那么可以看看下面的教程。 首先新建一个components文件夹,然后在里面创建一个select目录,再创建select页面。 select.js文件代码: // components/select/select.js Component({   /**    * 组件的属性列表    */   properties: {     propArray: {       type: Array,     },     key: {       type: String,       value: 'id'     },     value: {       type: String,       value: 'name'     }   },   /**    * 组件的初始数据  ...