微信小程序小笔记

微信小程序官方文档地址

image.png

🔥微信map地图组件闪退问题

安卓手机在切换tab的时候,频繁切换时,小程序会闪退
解决方案

🔥日期格式化:

<wxs src="../../utils/filter.wxs" module="filter"></wxs>
 <text class="time"> {{filter.format(newsMsg.createAt,'YYYY-MM-DD')}}</text>

利用.wxs方法,在页面上引入
utils/filter.wxs

function format(ts, option) {
//此处因为ios时间的转化问题,所以要把时间中 2021-03-21 中的 - 替换成 /
  var reg = getRegExp("-", "g"); // 获取正则表达式,全局替换
  var date = getDate(ts.replace(reg, "/"))
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var week = date.getDay()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  //获取 年月日
  if (option == 'YYYY-MM-DD') return [year, month, day].map(formatNumber).join('-')

  //获取 年月
  if (option == 'YYYY-MM') return [year, month].map(formatNumber).join('-')

  //获取 月日
  if (option == 'MM-DD') return [month, day].map(formatNumber).join('-')

  //获取 年
  if (option == 'YYYY') return [year].map(formatNumber).toString()

  //获取 月
  if (option == 'MM') return [mont].map(formatNumber).toString()

  //获取 日
  if (option == 'DD') return [day].map(formatNumber).toString()

  //获取 年月日 周一 至 周日
  if (option == 'YYYY-MM-DD Week') return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 月日 周一 至 周日
  if (option == 'MM-DD Week') return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)

  //获取 周一 至 周日
  if (option == 'Week') return getWeek(week)

  //获取 时分秒
  if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')

  //获取 时分
  if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')

  //获取 分秒
  if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')

  //获取 时
  if (option == 'hh') return [hour].map(formatNumber).toString()

  //获取 分
  if (option == 'mm') return [minute].map(formatNumber).toString()

  //获取 秒
  if (option == 'ss') return [second].map(formatNumber).toString()

  //默认 时分秒 年月日
  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function getWeek(n) {
  switch (n) {
    case 1:
      return '星期一'
    case 2:
      return '星期二'
    case 3:
      return '星期三'
    case 4:
      return '星期四'
    case 5:
      return '星期五'
    case 6:
      return '星期六'
    case 7:
      return '星期日'
  }
}

module.exports.format = format

🔥下拉加载更多:

.json

"enablePullDownRefresh":true,

.wxml

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pages: 0,
      list: [],
      'queryModel.current': 1,
      'queryModel.size': 10,
      'queryModel.totalCount': 0
    })
 // 接口加载数据
    this.getNewsPage()
  // 停止加载,下拉返回
    wx.stopPullDownRefresh();
  },

🔥空格,'&nbsp'问题

👉 复 制 吧 👈
微信小程序中的多个空格怎么打? | 微信开放社区

🔥text文本属性

如果属于纯文本,切属于 <textarea>输出的内容,尽量用 <text>组件标签

<text>{{details.intro}}</text>

🔥rich-text 富文本图片和换行问题

rich-text

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

图片百分比

//rich-text富文本图片自适应处理
// content 为富文本内容
content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

不换行问题/app.wxss

/* 富文本样式,解决富文本不换行问题 */
rich-text {
  word-break: break-all;
  white-space: pre-wrap;
}

🔥对象深拷贝

//对象深拷贝
const deepClone = function (obj, newObj) {
  var newObj = newObj || {};
  for (let key in obj) {
    if (typeof obj[key] == 'object') {
      let isArray = Array.isArray(obj[key]); //判断是否数组
      newObj[key] = (isArray == true ? [] : {})
      deepClone(obj[key], newObj[key]);
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj;
}
module.exports = {
  deepClone
}

🔥request请求封装

utils/request.js

const baseURL = '服务器地址';

function request(method, url, data) {
  return new Promise(function (resolve, reject) {
    let header = {
      'content-type': 'application/json',
    };
    wx.request({
      url: baseURL + url,
      method: method,
      data: method === 'POST' ? JSON.stringify(data) : data,
      header: header,
      success(res) {
        //请求成功
        //判断状态码---errCode状态根据后端定义来判断
        if (res.data.code == 200) {
          resolve(res.data);
        } else {
          //其他异常
          reject('运行时错误,请稍后再试');
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}
export default request

api/index.js使用

// 小程序接口
import request from '../utils/request'
const API = {
  getFlightPage: (data) => request('POST', '/flight/page', data),
  // 查询各模块的在线生活服务
  lifeServeList: (moduleId) => request('GET', `/module/life/service/list?module=${moduleId}`),
}
module.exports = {
  API: API
}

app.js入口引入

//引入api接口
const $api = require('./api/index').API
...
App({
$api,
...
})

.wxml

const app = getApp()
...
//接口调用
 app.$api.newsDetails().then(res => {})

🔥修改页面背景色

.wxss

page{
background-color:'每个页面都可以自定义背景色'
}

🔥<image>mode属性

<image>组件

🔥IOS<video>黑屏问题

custom-cache="{{false}}"
一般缓存为一级缓存、二级缓存、和自定义缓存,换而言之custom-cache="{{false}}"就是不使用自定义缓存的意思。为什么用了视频组件会卡loading加载不出来呢,可能是因为微信设置的自定义缓存的位置有容量限制,因此将它关闭了以后会自动使用系统缓存,可能就没有这个问题了。

<video autoplay="true" src="{{url}}" controls custom-cache="{{false}}"></video>

🔥微信小程序暗黑模式

暗黑模式详解文章

🔥微信小程序escape转码

例如你要传递一个URL链接参数到下一个页面,你可能发现微信会自动给你截取一部分参数,因此可以通过此种方式避免。

//转码
escape()
//解码
unescape()

🔥微信小程序生成二维码

weapp-qrcode.js

//引入
const QRCode = require('../../utils/weapp-qrcode.js')
//使用
  new QRCode('myQrcode', {
      text: `xxx链接`,
      width: 200,
      height: 200,
      padding: 12, // 生成二维码四周自动留边宽度,不传入默认为0
      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
      callback: (res) => {
        console.log(res.path)
        // 接下来就可以直接调用微信小程序的api
      }
    })
//调用扫一扫获取结果
// 只允许从相机扫码
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        wx.navigateTo({
          url: res.result //xxx链接
        })
      }
    })

推荐阅读更多精彩内容

  • 优点 无需安装。 随处可见,随处使用。 使用完,无需写在卸载。 小程序的申请地址。 https://mp.weix...
    taijielan阅读 46评论 0 0
  • 走进小程序 微信⼩程序的注册流程去微信公众平台注册⼩程序账号获得appid和appsecret 微信开发者⼯具安装...
    强某某阅读 107评论 0 2
  • (一)阮一峰教程之一:初次上手 hello world 示例 app.jsapp.jsonpages/home 子...
    LuckyStar04阅读 39评论 0 0
  • 1.学习资料相关 1.文档 名称描述小程序开发指南[https://developers.weixin.qq.co...
    Small_Cake阅读 193评论 0 0
  • 夜莺2517阅读 3,380评论 1 6