小程序开发

很快微信开发者社区最新小程序开发问答整理(3月23日)


微信阅读代码体验较差,强烈建议电脑端访问社区www.henkuai.com获取小程序最新技术动态


微信小程序开发问答新鲜出炉,最近大家提问与回答热度明显增高,说明小程序开发过程中还是遇到了不少问题,社区整理出新一期已解决的小程序问题给大家,另外,我发现很多同学的问题可能都已经得到了解答,但迟迟没有手动选择一个最佳答案,所以再次提醒下各位同学,问题得到解决了一定记得及时确认最佳答案噢!


当然了,问题如果没人解答,最后靠自己解决了,也希望能够反馈下解决的办法 ~


特别感谢社区用户@蜗牛呆呆、@上帝超、@徐海东、@cys1208、@HotGaoGao、@jinyutao0531、@zhson、@呆呆的出行者、@Yangleilei贡献的最佳答案。


本期社区最新小程序开发问答整理如下:


Q:各位大大,我只需要判断各项的checked的值是true or false,怎么实现?

Page({  data: {    items: [     

{name: 'USA', value: '美国'},      

{name: 'CHN', value: '中国', checked: 'true'},    

{name: 'BRA', value: '巴西'},   

{name: 'JPN', value: '日本'},     

{name: 'ENG', value: '英国'},     

{name: 'TUR', value: '法国'},    ]  },  


checkboxChange: function(e) {    console.log('checkbox发生change事件,携带value值为:', e.detail.value)  }})


A:单从这个例子来说的话,可以将name改为与数组中的索引值相同,这样返回的数组,就是被选中的索引值的集合,根据这个就能判断每个项是否被选中了。


原贴:http://www.henkuai.com/thread-29262-1-1.html


Q:wx.getLocation()获取的经纬度不准确?

<map show-location>显示的小绿点非常准确,但是通过getLocation获取到的经纬度就跟小绿点偏差了一段距离,请问有办法可以解决吗?


A:<map>标签带了一个show-location的属性,加上之后可以在地图上显示一个小绿点表示你的位置;


用wx.getLocation()可以获取到当前的经纬度,我写了一个marker,把获取到的经纬度传了进去之后发现marker跑偏了一大截,都跑到街的另一边了,想了挺长时间也没想到怎么处理,也查不到什么资料。


突然,眼睛瞥到了getLocation()方法的一句注释,// 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标,抱着试一试的心态把默认的wgs84换成了gcj02,重新编译,成功!


原贴:http://www.henkuai.com/thread-29332-1-1.html


Q:微信小程序checkbox或radio样式能改吗?

微信小程序checkbox默认样式真是有点丑,怎么能改改样式,比如稍微调小些,ps:直接为checkbox加样式是没有用的


A:写两个一个用图片 ,一个用checkbox 定位同个位置,不同层级,checkbox用opacity:0


原贴:http://www.henkuai.com/thread-28457-1-1.html


Q:在真机上调用wx.uploadFile失败怎末回事,模拟器上就成功了

在模拟器上好使,并且文件能上传,在真机上就直接输出error了。。怎么回事?


A:解决了,原因是name是中文所以失败,修改成name: encodeURI(name),后台在解码就好了


原帖:http://www.henkuai.com/thread-29213-1-1.html


Q:微信小程序怎截取字符串?

我用 .net 写的webserice接受数据,返回 

<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">{  "list": [{"Id":1,"TyleId":399,"ExamName":"真考题库试卷1","Number":"M01","Enabled":true}]}</string>"


怎么截掉

<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">


这些无用的字符


A:webservice不返回xml,改成json


原帖:http://www.henkuai.com/thread-29242-1-1.html


Q:插入的图片像素很高,却很小

<view class="bottom-btn wrapper" wx:else>

    <image src="../../image/3.jpg" mode="aspectFit" style="width:{{imageWidth}}px;height:{{imageheight}}px"></image>

    <button bindtap="goLogin" plain="false">开始读书吧</button>

</view>

</view>


A:是不是你的view限制了大小,或者你试试给图片设置css控制一下大小,给你这个工具类吧

//util.js 

function imageUtil(e) { 

var imageSize = {}; 

var originalWidth = e.detail.width;//图片原始宽 

var originalHeight = e.detail.height;//图片原始高 

var originalScale = originalHeight/originalWidth;//图片高宽比 

console.log('originalWidth: ' + originalWidth) 

console.log('originalHeight: ' + originalHeight) 

//获取屏幕宽高 

wx.getSystemInfo({ 

  success: function (res) { 

   var windowWidth = res.windowWidth; 

   var windowHeight = res.windowHeight; 

   var windowscale = windowHeight/windowWidth;//屏幕高宽比 

   console.log('windowWidth: ' + windowWidth) 

   console.log('windowHeight: ' + windowHeight) 

   if(originalScale < windowscale){//图片高宽比小于屏幕高宽比 

    //图片缩放后的宽为屏幕宽 

     imageSize.imageWidth = windowWidth; 

     imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 

   }else{//图片高宽比大于屏幕高宽比 

    //图片缩放后的高为屏幕高 

     imageSize.imageHeight = windowHeight; 

     imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 

   } 

     

  } 

}) 

console.log('缩放后的宽: ' + imageSize.imageWidth) 

console.log('缩放后的高: ' + imageSize.imageHeight) 

return imageSize; 


module.exports = { 

imageUtil: imageUtil 


js代码

//index.js 

//index.js 

//获取应用实例 

var imageUtil = require('../../utils/util.js'); 

var app = getApp() 

Page({ 

data: {  

  imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg', 

  imagewidth: 0,//缩放后的宽 

  imageheight: 0,//缩放后的高 

  

}, 

onLoad: function () { 

}, 

imageLoad: function (e) { 

  var imageSize = imageUtil.imageUtil(e) 

  this.setData({ 

   imagewidth: imageSize.imageWidth, 

   imageheight: imageSize.imageHeight 

  }) 

}) 


wxml的代码

<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagethirdsrc}}" bindload="imageLoad"></image>


你自己找一些适应比较好的图片,或者根据屏幕占比选择图片也可以,这样需要准备多点图片才可以多类型手机,或者根据宽长去拉伸图片也可以,只是会怪怪的


原帖:http://www.henkuai.com/thread-29158-1-1.html


Q:发送模版消息,返回了40003,说是无效openid,谁来帮忙?

后台用php curl发送模版消息,但是返回了40003,无效的OpenID的暗示

  

我获取openid好几次都没有变化,什么问题..


A:检查下openid是不是对的,可能openid你用错了


原帖:http://www.henkuai.com/thread-29218-1-2.html


Q:全局变量修改问题


微信小程序app.js中定义的全局变量可以在  pages中的js文件中做修改吗?如果可以怎么做?谢谢大神解救


A:全局变量只能在json.js里面进行初始和修改,别的页面只能获取


其他参考:在app.js里面把你想要修改的变量用module.exports()这个方法对外抛出,定义其属性方法为修改参数,在你想要修改的js里面required app.js 。然后直接调用就好了,我就是这么用的,具体的还要你去挖掘。


原帖:http://www.henkuai.com/thread-29290-1-2.html


Q:关于小程序map标签问题

类似摩拜单车标识离我最近的这个标签,有大神有思路吗?怎么写


A:在每次刷新数据的时。计算所有makers距离屏幕中心坐标的距离,然后把这个数据放在markers数组的最后一个并且吧icon改一改就好了。


原帖:http://www.henkuai.com/thread-19723-1-1.html


Q:页面跳转问题

有这两个页面:

"pages/index/index.wxml"

"pages/actions/exam/exam.wxml"


均在app.json中注册且测试可用。


在这个页面("pages/login/login.wxml")中使用bindtap,js中使用wx.navigateTo进行页面跳转。

结果  url:'pages/actions/exam/exam'   成功

         url:'pages/index/index'   失败(无反应)


请教大家这是为什么


A:index页面有加tabbar吗,有的话navigateTo是没用的

有tabbar的页面,用

wx.switchTab({

  url: ''

})


原帖:http://www.henkuai.com/thread-29123-1-2.html


Q:点击获取验证码,倒计时60s怎么实现?


A:设置两个按钮,一个“点击发送验证码”btn1,一个“60S后重新发送”btn2,设置第一个按钮点击事件,点击后隐藏btn1,显示btn2,然后使用定时器,time-- ,把time绑定到按钮上面去,60S倒计时完,btn2隐藏 ,btn1出现


其他参考:刚写完你运气好  直接给你贴源码

// 启动倒计时

  beginTimer () {

    this.setData({

      sending: true     

    })

    let _this = this

    app.verifyTimer = setInterval(function() {

      var count = _this.data.count - 1

      _this.setData({

        count: count

      })

      if (count < 1) {

        clearInterval(app.verifyTimer)

        _this.setData({

          count: 10,

          sending: false

        })

      }

    }, 1000)

  },


原帖:http://www.henkuai.com/thread-18089-1-2.html


Q:小程序循环之后的取值

<block wx:for="{{voices}}">

    <view wx:if="{{item.message}}" >

    </view>

    <button>隐藏</button>

</block>


这样循环之后如何做到进入页面时 item.message为true?点击button怎么让相同index(或者其他方法)的view的message为false呢?


A:如果要进入页面就为true的话,其实也可以用昨天的思路呀

我这里是一个现成的例子你看看,看不懂的在问一下,或者直接Q我也行

//首先你请求后返回值,在返回值哪里循环一下你这个集合,然后添加到另外一个集合里面,顺便添加你需要的参数进去,例如item.message,每一条可以设置对应的参数true和false

success: function(res) {

var txtArray = [];

      for (var i = 0; i < this.data.voices.length; i++) {

        if (判断需要变成true的数据) {

          txtArray1[i] = {

            id: this.data.liuliangItems[i].id, message: true

          }else{

            id: this.data.liuliangItems[i].id, message: false

          }

        }}


原帖:http://www.henkuai.com/thread-29130-1-2.html


Q:小程序中怎么设置点击按钮,弹出一个弹窗,弹窗里面有输入框?求大神指点一二!


A:点击按钮进行显示和隐藏咯

<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">

    <input type="text">

</modal>


原帖:http://www.henkuai.com/thread-29168-1-2.html


Q:小程序怎么实现点击这张小图片后,弹出一个输入框?

当输入自定义内容后点保存;这时页面上就会多一张刚刚的小图片,点击新增的图片还可以修改内容。求大神帮帮忙解决下,困扰我很久了。


A:思路如下:

1.先在xxx.wxml文件里用wx:for写一个图片列表,图片数据从js中获取(暂时没有)(imgList)

2.然后对小图片绑定一个点击事件,点击以后弹出一个弹窗(内部包含一个输入框),可以输入内容(可参考Weui进行修改)

3.点击弹窗的确定,将输入的自定义内容同图片当成一个数据setdata保存到imgList里,然后通过第一步的wx:for展示

4.给wx:for里的每一个item绑定一个点击事件,点击可以修改数据

<view style="text-align:center">

  <input  bindinput="bindInupt" placeholder="请输入内容" style="border:1px solid black"/>

</view>

<view style="text-align:center;margin:0">

  <image src="/images/plus.png" style="width:100rpx;height:100rpx" mode="aspectFit" bindtap="bindtap"></image>

</view>

<view wx:for="{{imgUrls}}" style="text-align:center;margin:0">

  <image src="{{item.img}}" style="width:100rpx;height:100rpx" mode="aspectFit"></image>

  <view>{{item.content}}</view>

</view>[code]Page({

  data:{

    imgUrls:[],

    content:'',

    img:'/images/pan.png'

  },

  onLoad:function(options){

    // 生命周期函数--监听页面加载

  },

  bindtap:function(){

      var imgUrls = this.data.imgUrls

      var item={

          img:this.data.img,

          content:this.data.content

      }

      imgUrls.push(item)

      this.setData({

          imgUrls:imgUrls

      })

  },

  bindInupt:function(e){//输入的绑定方法

    console.log(e.detail.value)

    this.setData({

       content:e.detail.value 

    })

  }

})



原帖:http://www.henkuai.com/thread-29132-1-3.html


以上内容就是本期整理的微信小程序开发问答内容,再次感谢所有贡献过回答的同学们,整理的目的是为了方便更多的开发者参考查阅,所以后续更新不断,也期待大家积极参与 ~