微信小程序开发过程中遇到的问题及解决方案

微信小程序开发过程中遇到的问题及解决方案

小程序注意事项：navigator

0、小程序圆角失效问题 wxss

Index.wxss:

.banner_image image{

  border-radius: 20rpx;

  overflow: hidden;

  backface-visibility: hidden;

  transform: translate3d(0, 0, 0);

}

1、判断语句需要在{{ }} 中去判断 wx:if=”ture && false || ture&&true” 

wx:if="{{ (item.tips==1 && item.steps==3) || (item.tips==2 && item.steps==5) }}"

2、bindtap=“” 函数方法function ( ){ } 传参

e.currentTarget.dataset.id  &  e.target.dataset.id

wxml:

<view bindtap="GetAction" data-action="father"> 

<image src="../images/img1.jpg" mode="widthFix"> </image> 

<text>文字</text> 

</view> 

js:

let action = e.currentTarget.dataset.action;

Console.log(action);

控制台：

father

注释：

使用第一种的方法e.target.dataset.action 会获取当前点击的元素的action，则获取图片上的action，图片上没有action便取的是undefined；

使用第二种的方法e.currentTarget.dataset.action 会获取有事件的那个元素，即view，所以获得“father”

3、如何刷新data：{ showHide：flase, } showhide的值

data:{

showHide:false,

},

onOffFun: function (e){

var that = this;

that.setData({

showHide:true

})

},

4、微信小程序实现简单input正则表达式验证功能

  checkshr: function (e) {

    // 收货人 判断

    var regLowerCase=new RegExp('[a-z]','g');//判断用户输入的是否为小写字母

    var regCapitalLetter=new RegExp('[A-Z]','g');//判断用户输入的是否为大写字母

    var regNum=new RegExp('[0-9]','g');//判断用户输入的是否为数字

    var rsLowerCase&#(e.detail.value);

    var rsCapitalLetter&#(e.detail.value);

    var rsNum&#(e.detail.value);

    if(rsLowerCase){

      this.setData({

        result:'您输入的是小写字母'

      })

    }else if(rsCapitalLetter){

      this.setData({

        result:'您输入的是大写字母'

      })

    }else if(rsNum){

      this.setData({

        result:'您输入的是数字'

      })

    }else{

      this.setData({

        result:''

      })

    }

    

  };

5、navigator跳转标签open-type="switchTab"对应 wx.switchTab 的功能

<view class="btn-area">

  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator></view>

6、小程序 跳转链接 传参，及接受参数

List.wxml：

<navigator class="news_item" url="../detail/detail?id={{item.id}}">跳转详情页</navigator>

Detail.js

  onLoad: function (options) {

    var that = this;

    // 列表页 传参，接受参数 id

    this.setData({

      id: options.id,

    })

    console.log(that.data.id)

  },

7、三元运算符: 条件(true false) ? 值1(true) : 值2(false)

Wxml:

<view class="news_tit_li {{currentData == 0 ? 'active' : ''}}" data-current="0" bindtap='checkCurrent'></view>

<view class="news_tit_li {{currentData == 1 ? 'active' : ''}}" data-current="1" bindtap='checkCurrent'></view>

Js:

  //点击切换，赋值 tabSwitch、currentData

  checkCurrent: function(e) {

    const that = this;

    if (e.target.dataset.current==0) {

      that.setData({

        currentData:0

      })

    } else {

      that.setData({

        currentData:1

      })

    }

  },

8、wx.showToast 提示消息模块

      // 消息提示——wx.showToast(OBJECT)

      wx.showToast({  

        title: '取消收藏',  

        icon: 'none/success/error',  

        duration: 2000  

      })

9、wx.showModal 确定、取消 弹框

wx.showModal({

  title: '提示',

  content: '这是一个模态弹窗',

  success (res) {

    if (firm) {

      console.log('用户点击确定')

    } else if (res.cancel) {

      console.log('用户点击取消')

    }

  }})

10、小程序使用 input 需要 闭合，<input type=”text” />

<input type="text" placeholder="请输入手机号…"/>

11、text 标签 内不可以包含其他标签，会报错哦

<text></text>

12、小程序 调用相机/相册扫码

// 允许从相机和相册扫码

wx.scanCode({

  success(res) {

    console.log(res)

  }

})

// 只允许从相机扫码

wx.scanCode({

  onlyFromCamera: true,

  success(res) {

    console.log(res)

  }

})

13、地图导航

gym.wxml

<view class="gym_icon" bindtap="intoMap"></view>

gym.js

  //为了调出地图导航

  intoMap:function(){

    wx.openLocation({  

      latitude: 22.85758,  

      longitude: 108.31476,

      name: "南宁市西乡塘区秀厢大道东祥云商务酒店",

      address:"南宁市西乡塘区秀厢大道东祥云商务酒店",

      scale: 28

    })

  },

14、小程序内容板块换行<text> aaaaa n bbbbb </text>

n ：微信小程序中内容换行不能用<br/>，用n，并且必须放在<text></text>标签内生效，否则会解析成空格

第二板块 小程序 接口对接

15、小程序 接口对接 GET/POST : headers 不同引入

Get：

 headers: {

      'Content-Type': 'application/json'

    },

Post：

 header: {

          'content-type': 'application/x-www-form-urlencoded'

        },

16、判断 值  是否为 ‘’/undefined/null

//判断 uid 是否等于 undefined、 ‘’ 、null

// 与(&&)  或(||)  非(!)

    if(that.data.uid!=undefined && that.data.uid!="" && that.data.uid!=null){

      that.setData({

        loginStatus:typeof(options.uid)

      })

      console.log(that.data.uid)

    }else{

      console.log(that.data.uid)

    }

17、微信小程序ios系统border-radius元素 overflow:hidden失效问题

父元素使用border-radius 和 overflow：hidden；子元素使用了transform属性，父元素的overflow：hidden；会失效。

父元素设置以下两个属性：

backface-visibility: hidden;

transform: translate3d(0, 0, 0);

18、小程序 图片报错问题，

原因：图片绑定的数据在页面“初次”渲染的时候并没有被正确赋值，有可能你的数据是异步加载的，在渲染的时候还没有取到相应的数据

解决方法： 设置一个本地的图片地址作为动态图片地址未获取时的默认地址，或者在image里添加 wx:if="{{avatarUrl}}" imageUrl为你绑定的图片的地址

<image wx:if="{{userPic}}" src="{{api+userPic }}"></image>

或

<image src="{{userPic ? api+userPic : '../../images/head_img.png'}}"></image>

19、app.js/index.js 变量 传递

App.js :  this.globalData.serverApi

App({

onLaunch() {

    wx.getSystemInfo({

      success: res => {

        this.globalData.height = res.statusBarHeight;

      },

      fail(err) {

        console.log(err);

      }

    })

},

globalData: {  

serverApi:'',

height: 0, // 默认设置顶部高度

  }

})

Index.js :  app.globalData.serverApi

onLoad: function (options) {      

console.log(app.globalData.serverApi)

}

20、rich-text 富文本 图片路径替换 app.globalData.serverApi

Detail.wxml:

<rich-text nodes="{{content}}"></rich-text>

Detail.js:

Const app = get.App();

detailSuc: function (data){

    var that = this;

    var context = app.changefwb(t)

    that.setData({

      content:context,

    })

}, 

App.js: 公共方法

changefwb(strin){//懒加载处理 将src 换成 v-lazy=

    let newStr= place(new RegExp(/src="/g), `mode="widthFix" src="${this.globalData.serverApi}`);//v-lazy=

    return newStr;

},

globalData: {    

serverApi:'',

}

21、上传图片 wx.chooseImage()

  // 上传头像 开始

  changeAvatar: function () {

    var that = this;

    wx.chooseImage({

      count: 1, // 最多可以选择的图片张数，默认9

      sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有

      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有

      success: function (res) {

        var avatar = pFilePaths;

        const tempFilePaths = pFilePaths;

        // 图片上传

        wx.uploadFile({ //微信封装的上传文件到服务器API         

          url: app.globalData.serverApi+"/up_imgs.html",  //域名+上传文件的请求接口        

          filePath: pFilePaths[0],  // tempFilePath可以作为img标签的src属性显示图片 服务器图片的路径         

          name: "pic",  //上传到服务器的参数

         success(res) {  

            //这里的成功请求执行的内容是我们的图片上传到服务器成功 对应的是wx.uploadFile的api成功          

            console.log(res.data) 

            var data = JSON.parse(res.data)        

            that.setData({              

              uploadImg: data.data,   //将图片转换之后的服务器地址data.data(打印结果显示我的是data.data)推到data里面定义的空容器updataImg。html界面的显示也是用的这个路径，值得注意的是html里面要加上url域名  

              avatar: data.data,// 返回给 后台 头像修改了,下次再调接口的时候 头像会改变  

    

              })           

              console.log(that.data.uploadImg)         

            }        

        })

      },

      fail: function () {

      // fail

      },

      complete: function () {

      // complete

      }

    })

  },

      //调用封装的方法  修改信息

      quest(

        '/user_modifys.html',

        {

          pic:that.data.uploadImg?that.data.uploadImg:that.data.avatar,

          uid:that.data.uid,

        }, 

        that.userSuc, 

        that.userFail

      );

22、存储数据setStorageSync获取数据getStorageSync（同步）

Login.js

onLoad: function (options) {

      // 缓存 uid

      wx.setStorageSync('Uid', data.data.id)

},

Index.js:

// 获取缓存的 Uid    

var that = this;

var Uid = wx.getStorageSync('Uid')

that.setData({

uid:Uid,

})

23、计时器

setTimeout(function(){

   wx.switchTab({

     url: '../../index/index',

   })

},1000)

24、改变数组，生成新的数组map()

    // 将后台返回的数组 改为 需要的数组对象

uplist = res.up_tour.map(val=>{return{id:val.id,up_tour_pic.substr(0,4)=='http'?up_tour_pic:domain&#up_tour_pic,title:val.title,price:val.price,num:val.num,date:val.num,}
});