微信小程序入门常见问题总结

最近公司开始向小程序靠拢，作为零出发的人踩的坑真真的多，总结一下。

1. 选项卡切换页中内容没法实现不一样的高度
方法一：（新手不建议）
利用swiper标签实现

 <view class='header'>
    <view class='{{currentData == 0 ? "tabActive" : ""}}'  data-current = "0" bindtap='checkCurrent'>1</view>
    <view class='{{currentData == 1 ? "tabActive" : ""}}'  data-current = "1" bindtap='checkCurrent'>2</view>
  </view>
  <swiper current="{{currentData}}" class='content' bindchange="bindchange">
    <swiper-item>
      <scroll-view scroll-y>
       内容1... 
      </scroll-view> 
    </swiper-item> 
    <swiper-item>
      <scroll-view scroll-y>
      	内容2...
      </scroll-view>
    </swiper-item>
  </swiper>

//这样就会自适应高度
.content{
  height: 94.6vh; 
  /* overflow: auto;  */
  position: relative;
  top: 64rpx;
}

.content scroll-view{
  height: 94.6vh;
}

data: {
    currentData: 0,
  },
 bindchange: function (e) { 
    const that = this; 
    that.setData({ currentData: e.detail.current }) 
  },
  //点击切换，滑块index赋值 
  checkCurrent:function(e){ 
    const that = this; 
    if (that.data.currentData === e.target.dataset.current){ 
      return false; 
    }else{ 
      that.setData({ currentData: e.target.dataset.current }) 
    } 
  },

方法二：利用display:none来写

<view class='topHeader'>
    <button bindtap="onChangeShowP" class="{{show?'buttonActive':''}}">1</button>
    <button bindtap="onChangeShowC" class="{{!show?'buttonActive':''}}">2</button>
  </view>
  <view class="hide{{show?'show':''}}">内容1111</view>
  <view  class="hide{{!show?'show':''}}">内容2222</view>

 data: {
    show: true
  },
 onChangeShowP: function () {
    var that = this;
    that.setData({
      show: true
    })
  },
  onChangeShowC: function () {
    var that = this;
    that.setData({
      show: false
    })
  },

.hide{
 display: none;
}

.show{ 
 display: block;
}

2.图片预览在安卓上显示正常，苹果上不显示

所用路径中不能包含中文！！！

3.数据无法加载，打开调试之后数据显示

需要在微信公众平台中开发的服务器设置中加入自己的接口，注意必须是https开头，这是微信小程序的安全规范

4.在开发工具中无法加载数据

如果没有在服务器设置自己的接口，那么可以在开发工具中选择此项即可

5.小程序直接等于无法赋值

全局使用

that.setData({
    show: true
   })

本函数中使用直接等号就可以赋值

6.跳转h5页面

其实微信是不允许个人小程序跳转h5页面的（企业的可以），但是还是可以测试一下，用的是

<web-view src="{{address}}"></web-view>

新建一个页面写入以上代码，address写在onload函数中赋值跳转链接即可，注意只允许跳转https开头的链接

7.使用服务器和跳转页面的坑

服务器要求是https并且要求有域名

8.使用async以及await将异步请求转换为同步，同时封装wx.request请求（引入regenerator.js），通过import引入当前要使用的页面

test: async function(){
        var res = await wxRequest.get('https://xzzwfwxcx.rreuk.cn:9443/movePortal/hot/list?type=applet')
        console.log(res)
    }

9.页面内开启转发功能，写在app.js中
这样是默认分享当前页面的80%，也可以根据需要修改分享的样式

// 分享转发小程序
    wx.showShareMenu({
        withShareTicket: true
    })

10.调用免费的天气接口

// 免费天气接口调用
    wx.request({
        url: 'https://www.tianqiapi.com/api/?version=v1',
        method: 'GET',
        success: function(res){
            that.globalData.weather = res.data;
        },
        fail: function(err){
            console.log(err);
        }
    })

11.数据缓存，例如保存用户信息，让用户在一定时间段内，不用重复登录

这里面有Sync的都是同步获取，而没有的就是异步操作

wx.setStorageSync('logs', logs)//同步
wx.getStorage({//异步
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})

12.button的边框设置
在小程序中直接设置按钮的边框是不起作用的

13.直接设置padding没有右内边框
记得同时设置box-sizing: border-box;

14.调用小程序的摄像头时，修改默认样式
内容较多，详询我另一篇博文小程序调用摄像头修改默认样式

暂时发现这些，往后会持续更新…

注：记得用最新的开发工具，不然到上传的时候再更新会下载很慢！