开发建议

1. computed 计算属性的使用

npm 安装官方提供的 miniprogram-computed 组件后，通过微信开发者工具进行 npm 构建，并在需要使用的页面中引入该方法。
注意 computed 中不能使用 this ，只能通过方法传入 data

// 注意其引入方式，后方必须带上 .behavior
const computedBehavior = require('miniprogram-computed').behavior

Page({
	data: {
		default: 1
	},

	computed: {
		// 此处只能通过传入 data ，其方法内才能获取到 data 中的数据
		value(data) {
			return data.default
		}
	}
})

2. 注册全局方法

由于小程序的 js 文件中 import 不能使用 相对路径，在引入比如上方的 computed 方法时很麻烦，所以可以每个页面中可能使用到的方法，通过 app.js 挂载在 wx 对象下，类似浏览器的 window 对象，所以页面中即可通过 wx. 直接使用。

// 计算属性
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;

// 提示组件
import Toast from 'mind-ui-weapp/toast/toast';
wx.$toast = Toast;

3. 组件样式穿透

关于样式作用域详情，请查看官网文档：官方文档 (opens new window)

常用配置如下，页面级 wxss 样式将影响到自定义组件，但自定义组件 wxss 中的样式不会影响页面。

Component({
  options: {
    addGlobalClass: true
  }
})

4. base64 图片展示

base64 通过接口获取时大多情况需要通过以下方法把回车换行符去除后，image 标签才可以显示图片，浏览器无此情况。

const image = image.replace(/[\r\n]/g,""); 

5. slot 无法判断是否存在

微信小程序未提供判断 slot 插槽是否被使用的方法，所以只能通过传入是否需要使用插槽的字段来判断是否使用插槽。

6. 调用组件中的方法

以下以用户举报组件为例，调用组中的 open 方法显示 modal 弹窗，并传入对应参数，使 open 方法内部根据参数执行相关操作。

<report id="reportModal" bind:on-success="reportHandle" />

showReportModal() {
	const id = this.data.id;
	this.selectComponent('#reportModal').open(id);
}

7. 全局样式变量 var() 函数的使用

app.wxss 中定义样式变量，在所有页面中都可使用该变量，这样可以保持样式统一，在替换主题时，只需要变更定义的样式即可。
注意：组件中如果需要使用全局的样式变量，需要设置允许样式穿透，参考第3条。

page {
	--color-theme: #e54847;	/* 主题色 */ 
}

页面或组件中使用

.class {
	background-color: var(--color-theme);
}

8. 全面屏下底部安全距离

小程序页面中根元素标签为 page ，类似 HTML 的 body ，可通过它设置一些样式。
当然，在一些固定在底部的组件中，也需要设置底部安全距离，比如本项目中的 tool-bar。

page {
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

9. Page 扩展

将页面中 Page 的参数进行重写，增加一些共用的方法。page 的所有属性，请查看小程序官方文档 (opens new window)

在 app.js 中定义以下方法（也可以在其它 js 文件中定义，在 app.js 中导入）

const expandPage = () => {
  const originalPage = Page;

  Page = function (config) {

		const { onLoad } = config;

		config.onLoad = function(options) {

			// 每个页面进入 onLoad 生命周期时，都会进入该代码区域

			if (typeof onLoad === 'function') {
				onLoad.call(this, options)
			}
		}

    // 返回重写后的 Page 方法
    return originalPage(config)
  }
}

App({
	expandPage()
})

10. 如何根据索引操作数组中某个元素的某个属性

<view 
	wx:for="{{ list }}" 
	wx:key="index"  
	bindtap="handleClick" 
	data-index="index"
>content</view>

Page({
	data: {
		list: [
			{
				select: false
			},
			{
				select: false
			},
			{
				select: false
			}
		]
	},

	methods: {
		handleClick(e) {
			const index = e.currentTarget.dataset.index;
			const key = 'list[' + index + '].select';
			this.setData({
				[key]: true
			})
		}
	}
})

提示

如有其它问题，请加入 QQ群：577133021 进行交流