目录

  • 1.使用MinuU框架
  • 支付宝小程序原生开发注意：
  • 1.使用自定义组件，要在当前页面的json文件中声明组件
  • 2.事件绑定用小驼峰onTap
  • 3.事件传递参数
  • 4.组件的js配置参数
  • 5.修改组件的props参数，界面视图没有更新
  • 6.父子组件的传参和事件绑定
  • 7.使用组件库```mini-ali-ui```，按照官方文档的说明安装引入之后，构建的时候报错```Cannot find module 'mini-ali-ui/es/popup/index'```
  • 8.使用```popup+picker-view```时，滑动picker，背景页面跟着滑动：


1.使用MinuU框架

  • 1.全局安装MiniU
npm i miniu -g
  • 2.创建文件夹，cmd
npx create-miniu-app

支付宝小程序原生开发注意：

1.使用自定义组件，要在当前页面的json文件中声明组件

{
  "usingComponents": {
    "g-layout": "/components/GLayout/GLayout",
    "g-settle-card": "/components/GSettleCard/GSettleCard"
  }
}

2.事件绑定用小驼峰onTap

3.事件传递参数

// X wrong
onTap="itemClick(data)"
// ✔ Correct 用data-{参数名称}传递
<view data-data={{data}} onTap="itemClick">
// 在事件中接收
itemClick(event) {
  const item = event.target.dataset.data
}

4.组件的js配置参数

参数

类型

是否必填

说明

最低版本

data

Object

否

组件内部状态

-

props

Object

否

为外部传入的数据设置默认值

-

onInit

Function

否

组件生命周期函数，组件创建时触发

1.14.0

deriveDataFromProps

Function

否

组件生命周期函数，组件创建时和更新前触发

1.14.0

didMount

Function

否

组件生命周期函数，组件创建完毕时触发

-

didUpdate

Function

否

组件生命周期函数，组件更新完毕时触发

-

didUnmount

Function

否

组件生命周期函数，组件删除时触发

-

mixins

Array

否

组件间代码复用机制

-

methods

Object

否

组件的方法，可以是事件响应函数或任意的自定义方法

-

ref

Function

否

指定组件被ref引用时的返回值

1.18.0

5.修改组件的props参数，界面视图没有更新

  • 方法1：在data中定义一个数据，将props参数赋值给它，当props中的数据发生变化时更新data中的数据
Component({
    data() {
        return {
        	selectedData: []
        }
    },
    props: {
    	selectedData: [],
    },
    // 组件的声明周期
    didMount() {
        this.data.selectedData = this.props.selectedData
        console.log('触发didMount');
    },
    // 组件的声明周期
    didUpdate() {
        console.log('触发didUpdate');
        this.setData({
        	selectedData: this.props.selectedData
        })
    }
})

6.父子组件的传参和事件绑定

  • 注意：参数和事件的区别，事件一定要以on开头,否则会被当成普通的字符串处理
// 父组件-传递两个参数：data和selectedData，两个事件onItemCheck和onSettle
<g-settle-card
  data="{{item}}"
  selectedData="{{selectedData}}"
  onItemCheck="handleItemCheck"
  onSettle="handleSettle"
/>

7.使用组件库mini-ali-ui，按照官方文档的说明安装引入之后，构建的时候报错Cannot find module 'mini-ali-ui/es/popup/index'

  • 解决办法：降低mini-ali-ui的版本，默认是1.4.4 将为1.3.4就可以了

8.使用popup+picker-view时，滑动picker，背景页面跟着滑动：

  • 1.页面最外层设置overflow:hidden
  • 2.高度height:100%改成height:100vh
  • 3.需要滚动的地方使用scroll-view