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

我会带着你远行 2022-03-29 11:53 427阅读 0赞

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

**1. 选项卡切换页中内容没法实现不一样的高度**  
方法一：（新手不建议）  
利用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来写

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.在开发工具中无法加载数据**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
**5.小程序直接等于无法赋值**

全局使用

that.setData({
        show: true
       })

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

**6.跳转h5页面**

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

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

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

7.使用服务器和跳转页面的坑  
![在这里插入图片描述][20190623152125640.png]  
服务器要求是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);
            }
        })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]  
11.数据缓存，例如保存用户信息，让用户在一定时间段内，不用重复登录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]  
这里面有Sync的都是同步获取，而没有的就是异步操作

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

12.button的边框设置  
在小程序中直接设置按钮的边框是不起作用的  
![在这里插入图片描述][20190623153110349.png]  
13.直接设置padding没有右内边框  
记得同时设置box-sizing: border-box;

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20220329/3b21be9f8926462ca3f713487ea7f7f3.png
[20190623152125640.png]: /images/20220329/364d07ba75ad4bb196da5181c0ae83a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220329/1451941b949343b19951294dee927464.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220329/4bd96047f49b48b5a38a33eb7d3c1d0e.png
[20190623153110349.png]: /images/20220329/317f1d91f6c640cdb9a284b9d9373cdc.png
[Link 1]: https://blog.csdn.net/lb1135909273/article/details/93385157