min-program-component
v1.0.4
Published
小程序组件
Downloads
6
Readme
小程序开发说明
微信小程序 Taro 框架
官方文档：https://nervjs.github.io/taro/docs/README.html
导航
开发基本规范
目录结构
├── config # 配置目录
| ├── dev.js # 开发时配置
| ├── index.js # 默认配置
| └── prod.js # 打包时配置
| |-- env.js # 环境配置
|-- dist
|-- node_modules
|-- src
| |-- actions # 接口目录
| | |-- actions.js # 接口请求的汇总文件
| | |-- request.js # request请求方法的封装处理
| | |-- requestIntercept.js # request拦截配置
| |-- components # 公共组件目录
| | |-- Comp # 组件按目录分类存放（同一种类的不同组件建议统一归类）
| | | |-- index.js # 组件的入口文件
| | | |-- index.less # 组件的样式文件
| | | |-- README.md # 组件的说明文档
| | |-- Form # 表单类组件（组件归类示例目录）
| | | |-- Field # 字段输入框（目录）
| | | |-- FieldGroup # 字段输入框组（目录）
| |-- images # 图片目录（图片文件必须按目录分类存放）
| | |-- icons # icon类文件目录
| | |-- xxx # 其它类型文件目录
| |-- pages # 页面目录
| | |-- home # 为每个页面分配一个目录
| | | |-- modules # 页面下的子组件
| | | | |-- CompA.js
| | | |-- index.js # 页面的入口文件
| | | |-- index.less # 页面的样式文件
| |-- styles # 样式目录
| | |-- _mixins.less # 基础的变量、混合声明
| | |-- common.less # 公共样式
| | |-- icon.less # 图标字体
| | |-- taro-ui.scss # 第三方库样式引入
| |-- utils # 工具函数目录
| | |-- constant.js # 常量声明
| | |-- util.js # 工具函数
| | |-- dict.js # 字典数据
| | |-- globalData.js # 全局数据管理
| |-- app.js # APP入口文件（等同于原生的app.js、app.json和app.wxss）
|-- package.json # 项目的package配置
|-- project.config.json # 小程序项目配置，[参见详情](https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html?search-key=%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE)文件命名规则
- 图片文件：
图片文件统一放置在 images 目录下，并按文件夹分类存放，文件统一以小写字母命名，多个单词以横杠(-)连接。
例如：images/icon/icon-error.png、images/icon/icon-error-large.png等。
- 公共样式
公共样式统一放置在 styles 目录下，文件统一以小写字母命名，多个单词以横杠(-)连接。
例如：styles/common.less、styles/icon.less、styles/taro-ui.less等。
- 普通脚本:
普通脚本统一采用 Camel（驼峰式）的命名方式，文件以 .js 作为扩展名。
例如：util.js、globalData.js等。
- 页面文件：
页面文件统一放置在 pages 目录下，且统一采用 Camel（驼峰式）的命名方式按目录进行管理，入口文件以 index.js 进行命名。
例如：pages/home/index.js、pages/detail/index.js、pages/searchResult/index.js等。
- 页面组件：
页面中的组件抽离统一放置在页面所在目录的 modules 目录下，且统一采用 Pascal（首字母大写）的命名方式，文件以 .js 作为扩展名。
例如：pages/detail/modules/Slider.js、pages/detail/modules/Map.js等。
- 公共组件：
公共组件统一放置在 components 目录下，且统一采用 Pascal（首字母大写）的命名方式按目录进行管理，入口文件以 index.js 进行命名。
例如：components/Panel/index.js、components/SearchResult/index.js、components/LoadingMore/index.js等。
脚本书写规范
组件的自定义事件必须使用 on 前缀
准确的来说，父组件要往子组件传递函数，属性名称必须以 on 开头，这是由于微信小程序的组件化实现不能直接传递函数给子组件，在taro中是借助小程序组件的事件机制来实现这一特性的。
详情请参见 官方文档 。
<LoadMore
onComplete={this.handleMoreComplete}
/>事件处理函数统一使用 handle 前缀
// 跳转至详情页
handleNavToDetail = (id) => {
Taro.navigateTo({ url: `/pages/detail/index?id=${id}` })
}动态className命名统一采用classnames第三库进行
有关 classnames 第三库的使用，请参见它的 官方Github。
<View
className={classnames({
'order-list__item': true,
'order-list__item--first': index === 0
})}
/>页面的state声明尽可能添加注释
this.state = {
// 列表数据
listData: [],
// 头部筛选定位样式
listFixedStyle: '',
// 工单状态
workOrderStatus: '',
// 工单记录的数量
orderCount: '',
}页面的入口文件统一添加@fileoverview注释内容
该注释内容主要描述如下信息：
- 该页面时一个什么样的页面
- 该页面的开发者是谁
- 该页面url传参是用来干什么的
/**
* @fileoverview 工单详情
* @author 阳团
*
* this.$router.params
* |-- orderId 工单id
*/功能脚本的import名称统一使用首字母大写
import Dict from '../../utils/dict'
import Util from '../../utils/util'
import Actions from '../../actions/actions'import的书写顺序按NPM库、功能脚本、组件、样式依次进行
为了便于import导入语句的阅读，不同种类的导入代码之间空一行，示例如下：
// NPM库
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import classnames from 'classnames'
// 功能脚本
import Actions from '../../../actions/actions'
import Util from "../../../utils/util"
import Dict from '../../../utils/dict'
// 组件
import ListScrollLoad from "../../../components/ListScrollLoad/index"
import ListStatus from "../../../components/ListScrollLoad/ListStatus"
import Field from '../../../components/FormFied/Field'
// 样式
import './index.less'错误提示使用规则
表单校验的错误提示，采用顶部通知的形式，我们统一使用 Taro UI 的 AtMessage 组件来进行实现。配合WeValidator使用的话详见如下代码所示：
/**
* WeValidator全局配置
*/
import WeValidator from 'we-validator'
import weValidatorRule from './utils/weValidatorRule'
// 表单验证-全局配置
WeValidator.onMessage = function (data) {
Taro.atMessage({
type: 'error',
message: data.msg,
duration: 2000,
})
}
// 表单验证-自定义校验规则
weValidatorRule(WeValidator)/**
* AtMessage组件的页面配置
*/
// 导入 AtMessage 组件
import { AtMessage } from 'taro-ui'
// render函数
render() {
return (
<View>
{/* 在render中引入 AtMessage 组件 */}
<AtMessage />
</View>
)
}而其它提示，我们统一封装在 utils/tips.js 文件里头，使用详情如下：
// 导入 Tips 封装工具
import Tips from '../../utils/tips'
// 一般提示
Tips.info('一般提示')
// 一般提示&隐藏时回调函数
Tips.info('一般提示', () => {
console.log('隐藏提示框')
})
// 成功提示（接口请求成功）
Tips.success('成功提示')
// 成功提示&隐藏时回调函数
Tips.success('成功提示', () => {
console.log('隐藏提示框')
})
// 失败提示（接口请求失败）
Tips.fail('失败提示')
// 失败提示&隐藏时回调函数
Tips.fail('失败提示', () => {
console.log('隐藏提示框')
})
// 如果上面三种场景模式不能满足需求，就用Tips.toast()来完成
Tips.toast({
// 提示内容
message: '提示内容',
// 持续时间
duration: 3000,
// icon类型（同wx.toast)
icon: 'success',
// 自定义图标的本地路径（同wx.toast)
image: undefined,
// 提示框隐藏时执行的回调函数
onHide: () => {
console.log('隐藏提示框')
}
})
// 提示框不自动隐藏
Tips.toast({
// 提示内容
message: '提示内容',
// 持续时间，设置为0表示不自动隐藏
duration: 0,
// 提示框隐藏时执行的回调函数
onHide: () => {
console.log('隐藏提示框')
}
})
// 手动关闭提示框
Tips.clear()
// 加载提示
Tips.loading()
Tips.loading('加载中')
// 加载完成，隐藏加载提示
Tips.loaded()开发注意事项
微信小程序调试需要关闭的项目设置
- 需要设置关闭 ES6 转 ES5 功能，开启可能报错。
- 需要设置关闭上传代码时样式自动补全，开启可能报错。
- 需要设置关闭代码压缩上传，开启可能报错。
微信自定义组件的注意事项
- 微信组件不支持传递函数，只有自定义事件。
- 组件之间传递对象为值的拷贝，而非引用。
- 在Form组件的onSubmit事件中，无法收集自定义组件中使用的表单控件的值，需要通过自定义组件的
behaviors: ['wx://form-field']设置让自定义组件拥有类似表单控件的行为，这样才能被父级的Form识别。
向组件传递jsx内容的props命名必须以render开头
在微信小程序中，向组件传递wxml内容是通过 slot 的方式进行的，而 Taro 在实现这一功能时必须给 slot 取名，所以要求必须以 render 开头，这样便于识别 slot 命名。
详情请参见：官方文档。
class Dialog extends Component {
render () {
return (
<View className='dialog'>
<View className='header'>
{this.props.renderHeader}
</View>
<View className='body'>
{this.props.children}
</View>
</View>
)
}
}无法使用无状态组件或者js定义函数拆分页面模块
我们在进行以 React 开发的项目中，可能会使用 无状态组件 或者 jsx定义函数 来将页面的结构进行拆分，而不是以组件的形式进行拆分。
但是到了 Taro 这里，由于编译的局限性：
所以到了 Taro 这里，我们就只剩下组件的方式来拆分页面模块了。