微信小程序开发技巧

时间  2019-11-29
标签 微信 程序 开发 技巧 繁體版
原文   原文链接

开发小程序这么久了，整理了一些技巧清单，分享出来。css

一、backgroundColor 配置无效

页面配置中 backgroundColor 能够设置窗口颜色：html

{
  "backgroundColor": "#f2f2f2"
}
复制代码

这么设置完以后发现一点效果都没有，仔细研究一番，原来窗口颜色指的是最底层。（真想说句：卧槽~）vue

解决这个问题很简单，使用 page 选择器便可：react

page {
  background: #f2f2f2;
}
复制代码

page 是页面的根节点，也就是h5里的 html，因此能够用来设置一些样式。web

二、改变自定义组件根节点样式

header组件代码以下：npm

<view class="header">
  header
</view>
复制代码

能够看到渲染出来后发现多出 header 节点。编程

在大部分开发中跟组件节点并无什么用， 可是 某些状况下是会影响样式的， 好比说弹性布局，这里不贴demo了，反之此技巧一定用到，回头瞧瞧就行。json

咱们能够在自定义组件样式文件使用 :host 选择器修改跟组件节点：小程序

:host {
  padding: 50px;
}
复制代码

能够对比上图盒子模型微信小程序

三、block标签是什么

block 标签其实就相似于 react 中的 Fragment, Vue中的 template。

若是没接触过 react/vue 不要紧，看下面例子：

<block>
  <view>say</view>
  <view>hello</view>
</block>
复制代码

渲染后结果, block 节点消失

<view>say</view>
<view>hello</view>
复制代码

若是没有block节点，须要这么作:

<!-- 多渲染了跟节点标签 -->
<view>
  <view>say</view>
  <view>hello</view>
</view>
复制代码

比较经常使用的用来配合 wx:if

<block wx:if="{{ show }}">
  <view wx:for="{{ arr }}" wx:key="index">{{ item }}</view>
</block>
复制代码

四、如何设置背景图片

搞个背景图片都费劲 [发火]

日常在h5中设置背景图片直接引入地址就行

background: url("/example.png");
复制代码

可是在小程序中居然不能够。。。

为啥？？？

小程序： 你只能乖乖引入网络图片
xx: mmp, 设置个图片都搞那么多花样？ 我以为...
小程序：我不要你以为， 我要我以为。
复制代码

xx了。 只能走后门了。

一、能够将图片转成 base64 便可：

background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIxMDlweCIgIGhlaWdodD0iMTA5cHgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIHN0eWxlPSJiYWNrZ3JvdW5kOiBub25lOyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC45MTY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC44MzMzMzMzMzMzMzMzMzM0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNjY2NjY2NjY2NjY2NjY2NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjU4MzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNDE2NjY2NjY2NjY2NjY2N3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4yNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjE2NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMDgzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48L3N2Zz4=");
复制代码

二、内联节点中使用 backgorund-image

<view style="background-image: url(example.png)">
</view>
复制代码

这个方法我就不应说出来~ 由于在真机是无效的。。。（欲哭无泪）

三、使用 image 这个方法我也懒得详细贴demo了， 总之就是使用 image 改改样式设置到底部便可。

<view>
  <image src="example.png" />
</view>
复制代码

最后：如今的项目本地图片使用是很是少的，反正我见过的项目最多也就几张。 因此设置背景图片最简单的方法就是使用base64。

五、object-fit无效

在h5中使用 object-fit 特性是很是多的，它能够对图片保持必定的比例，而不会发生变形， 若是想了解其具体内容到 MDN

在小程序中对图片使用此特性是没有效果的

.image {
  object-fit: cover;
}
复制代码

解决这个问题也很简单，使用小程序自带的属性便可

<image src="example.png" mode="aspectFill"></image>
复制代码

具体属性可到官方查看 mode属性一览

六、小程序mock数据

在WEB开发中咱们会使用 mockjs 进行拦截请求从而模拟数据。

在小程序中也可使用吗？ 那固然了， 只不过要对小程序 wx.request 处理。

一、安装 mockjs

npm i mockjs
复制代码

二、新建 wxMock.js

// 有点水平的应该能看得懂
// 微信底层API都是不能重写的，因此用到 defineProperty 将其设置可写
// 以后重写了底层 wx.request 方法，而后作些处理便可

const __request = wx.request;
const Mock = require('mockjs');

Object.defineProperty(wx, 'request', { writable: true });

wx.request = function (config) {
  if (typeof Mock._mocked[config.url] === 'undefined') {
    __request(config);
    return;
  }

  const resTemplate = Mock._mocked[config.url].template;
  const response = Mock.mock(resTemplate);

  if (typeof config.success === 'function') {
    config.success(response)
  }
  
  if (typeof config.complete === 'function') {
    config.complete(response)
  }
};

module.exports = Mock;
复制代码

三、使用 wxMock.js

const Mock = require('wxMock.js')

// 日常怎么用的就怎么用
Mock.mock('/api/example', {
  data: { ... }
})
复制代码

四、在app.js入口文件中引入mock

import "./mock/index.js";
复制代码

七、图片宽度100%，高度没法自适应

在WEB开发中当把图片设置 100% 时，高度会自适应。

小程序就是不行，不行你看：

由于小程序底层已经对 image 添加了宽高了，因此默认就是 240px。

解决方法是给 image 元素添加 mode 属性

<image src="example.png" mode="widthFix"></image>
复制代码

当添加此模式并给图片设置 100% 宽度后，小程序自动计算其高度，就可让图片自适应了。

八、properties 能定义多个类型吗？

我只能先说能够。

此特性是小程序基础库2.6.5新增的，可能有些小伙伴不知道。

optionalTypes 字段是个数组，指定属性类型，能够多个。

Component({
  properties: {
    lastLeaf: {
      // 这个属性能够是 Number 、 String 、 Object 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})
复制代码

九、跳转到tabbar没法返回上一层

这个问题我估计每个开发者都经历过。

常规页面跳转到 tabbar 页面只能使用 wx.switchTab ，此API有个问题是：跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面

因此当跳转到 tabbar 页面左上角返回键天然就没了，因此是没法返回上一层的。

用得比较多的场景就是购物车了， 某个页面跳转到购物车不能够返回上一层那体验不是不好么。

这个问题我就不贴demo了，说下其方案。

  • 自定义导航头部，新增一个返回键
  • 自定义 tabbar 组件， 这个时候就不存在什么 switchTab 跳转了
  • 将购物车页面封装成一个组件，而后新建2个页面，一个做为tabbar，一个做为常规页面，目前jd使用这种方案。

十、页面使用 behaviors

behaviors 是用于组件间代码共享的特性，相似于一些编程语言中的“mixins”或“traits”。

遗憾的是 behaviors 只能用于组件，想在页面中使用怎么办？

虽然页面中不可使用 behaviors 可是咱们能够模拟 mixins 混入。

一、首先咋们可使用 lodash 工具类 merge

或者本身实现：

export function merge(source, other) {
  if (!isObject(source) || !isObject(other)) {
    return other === undefined ? source : other
  }
  // 合并两个对象的 key，另外要区分数组的初始值为 []
  return Object.keys({
    ...source,
    ...other
  }).reduce((acc, key) => {
    // 递归合并 value
    acc[key] = merge(source[key], other[key])
    return acc
  }, Array.isArray(source) ? [] : {})
}
复制代码

二、say.js 使用 mixins, 把它当成一个普通对象导出便可

export default {
  data: {
    say: 'hello'
  },
  $setData() {
    this.setData({ say: 'world' })
  }
}
复制代码

三、在页面中引入 mixins

import merge from './merge.js'
import say from 'say.js'

Page(merge(say, {
  data: {
    foo: 'foo'
  },
  onLoad() {
    // 调用 mixins 中的方法
    this.$setData()
  }
}))
复制代码

这还算是比较完美的mixins方案了， 不过它有个缺点： 后面函数会覆盖前面函数，在生命周期咋们能够这么解决：

// say.js mixins
export default {
  onLoad(options) {
    this.onLoadCallback && this.onLoadCallback(options)
  }
}
复制代码

在有使用mixins的页面能够稍微改动

// ...

Page(merge(say, {
  onLoadCallback(options) {
    // ... do something
  }
}))
复制代码

十一、避免 thirdScriptError 异常

一旦抛出 thirdScriptError 会致使整个应用程序崩溃白屏。

  • 一、不要在小程序项目中包含 dom/bom 相关API，即时不使用也会抛出异常，由于小程序会编译整个项目。
  • 二、properties 必定要声明类型
  • 三、不要提早引用，如 App 未注册调用 getApp

总结

微信小程序开发和 web 仍是有一些区别的， 小程序的开发灵活度虽然如今没有那么高，但随着不断的迭代更新，会慢慢获得改善，并受到众多开发者的喜好。

这篇文章不会断更，只要有些好的技巧会总结下来并分享。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程