小程序学习笔记（一）

张豆豆94

已于 2022-02-15 10:08:14 修改

阅读量1k

点赞数

分类专栏：【微信小程序笔记】文章标签：小程序 javascript 前端

于 2018-11-12 10:44:53 首次发布

本文链接：https://blog.csdn.net/weixin_42735261/article/details/83988219

版权

【微信小程序笔记】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.字符串传递

跳转界面 //通过提供的JSON.stingify方法,将对象转换成字符串后传递
var gsinfo = JSON.stringify(that.data.gsinfo);
接收界面 //将字符串转换成对象
var bean = JSON.parse(options.gsinfo);

2.radio单选

选中的选项设置 checked=“true”，未选中的设置checked=“false”，
仍然显示选中效果，只有设定checked为空的元素，才是未选中的。
设置未选中项的checked值，有两种方法：
a.设置为空字符串 checked="{{item.val}}", item.val 为空字符串
b.在 js 中删掉变量 delete arr[i][‘val’]

3.字符串转对象

    var jsonStr = res.data;
    jsonStr = jsonStr.replace(" ", "");
    if (typeof jsonStr != 'object') {
      jsonStr = jsonStr.replace(/\ufeff/g, ""); //重点
      var jj = JSON.parse(jsonStr);
      res.data = jj;
    }

4. 动态设置当前页面的标题

wx.setNavigationBarTitle({
title: ‘当前页面’
})
在当前页面显示导航条加载进度条。
showNavigationBarLoading({
title: ‘当前页面’
})

5.提示框文本

    wx.showLoading({
      title: '加载中',
      mask: true
    })
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 3000
    })
    setTimeout(function () {
      // wx.hideToast()
      wx.navigateTo({
        url: '/pages/list/list'
      }) //提示后跳转

    }, 3000)

    wx.showModal({
      title: '提示',
      content: '确认保存吗？',
      showCancel： true, //是否显示取消按钮
      confirmText: "确定", //按钮的文本内容，不得超过四个字符
      confirmColor: '#09f', //按钮的文本颜色，默认#000000
      cancelText: '取消',
      cancelColor: '#09f',
      success: function (res) {
        if (res.confirm) { //这里是点击了确定以后
          //console.log('用户点击确定')
        } else { //这里是点击了取消以后
          //console.log('用户点击取消')
        }
      }
    })

6.点击按钮，底部出现多个选项（如拍照、转发等）

    wx.showActionSheet({
        itemList: ['A', 'B',
          'C'],
        success: function (res) {
          if (!res.cancel) {
            console.log(res.tapIndex)
          }
        }
      })

  参考：[https://blog.csdn.net/m0_38082783/article/details/78970471](https://blog.csdn.net/m0_38082783/article/details/78970471)

7.跳转返回传值

let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。 
let prevPage = pages[ pages.length - 2 ];   
//prevPage  -2 是上一个页面，-3是上上个页面以此类推。 
prevPage.setData({  // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。 
    id:e.currentTarget.dataset.id, 
    istype : e.currentTarget.dataset.istype, 
    isaddress : e.currentTarget.dataset.isaddress 
})
wx.navigateBack({
    delta: 1
})

B页面onShow

    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    this.setDate({
        id:currPage.data.id, 
        istype:currPage.data.istype, 
        isaddress:currPage.data.isaddress 
    })

8.计时器在使用时要先执行清除操作

clearInterval(that.data.setIntOrder)
that.setData({
  setIntOrder: setInterval(function () {
    that.orderDetail();
  }, 1000)
})

9.IOS flex布局兼容

.both{
    display: flex;
    display: -webkit-flex; 
    justify-content: center;
    -webkit-justify-content: center;
    align-items:center;
    -webkit-align-items: center;
}

10.关于setData的使用

setData基本使用

this.setData({
   'list[0].value':'11111'
})

var list = this.data.list;
list [0].value = '11111';
//等同于  this.setData({list: list})
this.setData({list})

修改list中某一条的checked属性

var index=0;
this.setData({
   [`list[${index}].checked`]:false,
})

var index=0;
var item = "list["+ index + "].checked";
this.setData({
   [item]:false,
})

删除后端返回的冗余字段，减少setData数据大小

 let rawList = res.list
 this.list = this.simplifyArticleList(rawList)

 simplifyArticleList (list) {
      return list.map(item => {
          return {
              id: item.id,
              name: item.name
              // 需要哪些字段就加上哪些字段
          }
      })
}

下拉加载，向list添加多条数据

let newData=res.data.list;
let changeData={};
let index=this.data.list.length
newData.forEach((item) => {
   changeData['list[' + (index++) + ']'] = item //赋值，索引递增
}) 
this.setData(changeData)

11.地图默认小蓝点

地图默认小蓝点是因为show-location 去掉或设为false就可以啦

12.设置遮罩层

参考：微信小程序中遮罩层的实现

13.spinner下拉选项列表

参考：微信小程序之自定义select下拉选项框组件

14.延迟一部分操作到下一个时间片再执行

    this.setData({ number: 1 }) // 直接在当前同步流程中执行
    wx.nextTick(() => {
      this.setData({ number: 2 }) // 在当前同步流程结束后，下一个时间片执行
    })

15.小程序text加空格

 <text decode = "{{true}}">此处加入&nbsp;&nbsp;空格 </text>

16.数组操作

数组

17.绝对路径和相对路径

绝对路径
以“/”开头代表根目录，
如：/pages/index/index
相对路径
./ 表示当前目录 …/ 表示上级目录
如：…/…/…/MyView/search/search
或者：MyView/search/search

18.加载中动画

 <view class="weui-loading"></view>

.weui-loading {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
  background-size: 100%;
}

19. 关于下拉加载

view 触发onReachBottom触底事件
如果用的是scroll-view 通过bindscrolltolower绑定一个事件

20. 轮播图圆点样式修改

swiper.square-dot .wx-swiper-dot {
  background: #fff;
  opacity: 0.2;
  width: 15px !important;
  height: 5px !important;
  border-radius: 10px !important;
  transition: all 0.3s ease-in-out 0s !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
  opacity: 1;
}

swiper.wx-swiper-dot {
  width: 5px !important;
  height: 5px !important;
  top: -2px !important;
  transition: all 0.3s ease-in-out 0s !important;
  position: relative;
}

swiper.wx-swiper-dot.wx-swiper-dot-active::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  border-radius: 10px;
}

swiper.wx-swiper-dot.wx-swiper-dot-active {
  width: 9px !important;
  height: 9px !important;
  top: 0px !important;
}

21.图片加载

小程序请求服务器图片，图片地址和名称不改变，显示的图片不刷新问题
1.后端清缓存
2.地址后拼时间戳随机数

          that.setData({
            src: res.data.src+"?"+Math.random(),
          })

22.其他

1.控制组件是否显示时用hidden 因为wx:if有更高的性能消耗
2.页面跳转在onUnload中进行资源的销毁比如清除计时器
3.小程序数值计算有时候出现is not a function或其他错误，可能是因为数据是string类型。
必须先用parseInt()或parseFloat()或Number()函数转成Number类型，然后再toFixed()或其他计算。

23.模块化

参考：WXS模拟过滤器修改订单状态
1.新建filter.wxs文件

var filter = {
	orderStatus: function(val) {
		switch (val) {
			case 0:
				return '待付款';
			case 1:
				return '已装车';
			case 2:
				return '已收货';
			case 3:
				return '已完成';
			case 4:
				return '已取消';
			default:
				console.log('error')
		}
	}
}
module.exports = {
	orderStatus: filter.orderStatus
}

2.在需要的wxml里引入filter.wxs

<wxs src="./../filter.wxs" module="_orderFilter" />
<view> {{_orderFilter.orderStatus(item.state)}} </view>

24.async和await的使用

变异步为同步
在小程序里使用async和await时，一定是成对的。 async放在函数名前面，await放在数据请求前面

function wxRequst(url, data, type) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: url,
            data: data,
            method: type,
            success: function (res) {
                if (res.data.code == 1) {
                    resolve(res) //成功调用resolve
                } else {
                    reject(res) //失败调用reject
                }
            },
            fail: function (res) {
                reject(res)
            }
        })
    })
}

async login () {
    let res = await wxRequest(api.globalData.url, data, 'POST')
    let resData = res.data;
    if (resData.errcode == 200) {
        //接口成功逻辑
    } else {
    　　//接口失败的逻辑
    }
},

25.A页面通知B页面进行相关操作

通过通知解决app.js不能setData的问题
微信小程序-通知广播WxNotificationCenter（应用、解析）
GitHub地址

A页面发送通知

//发送通知（所有注册过'NotificationName'的页面都会接收到通知）
WxNotificationCenter.postNotificationName('NotificationName')
//需要传值的话
WxNotificationCenter.postNotificationName('NotificationName',obj)

B页面注册、移除通知，及接收通知后响应的fuction

  onLoad: function () {
    //注册通知
    WxNotificationCenter.addNotification('NotificationName', this.changeNum, this)    
  },

  onUnload: function () {
    //移除通知
    WxNotificationCenter.removeNotification('NotificationName', this)
  },

  //通知处理
  changeNum: function (obj) {
    //obj为通知传值
  },

26.字符串拼接

//longhand
var welcome = 'Hi,' + test1 + ' ' + test2 + '!';

//shorthand
var welcome = `Hi ${test1} ${test2}`;