1. 设置状态栏的背景颜色

my.setNavigationBar : https://opendocs.alipay.com/mini/api/xwq8e6
image.png

2. 组件

注意：组件命名不能用驼峰形式 只能用 - 拼接
子组件：

  1. .axml
  2. <view>......</view>
  4. .js
  5. Component({
  6.   props:{
  7.     test1:'文本1',
  8.     onClickMe: () => {},
  9.   },
  10.   methods: {
  11.     onClickMe() {
  12.       this.props.onClickMe();
  13.     },
  14.   },
  15. });
  17. .json
  18. {
  19.   "component": true
  20. }

父组件：

  1. .json
  2. {
  3.   "defaultTitle": "商家名称",
  4.   "usingComponents": {
  5.     "shop-info":"./components/shop-info/index"
  6.   }
  7. }
  8. .axml
  9. <shop-info/>

3.UI包

mini-ali-ui / mini-antui

4.开发中注意的点

  1. props不可再子组件中修改，要通过函数在父组件中做修改 ```css 父组件.axml

子组件.js Component({ data: { counter: 0 }, // 设置默认属性 props: { onCounterPlusOne: (data) => console.log(data), extra: ‘default extra’, }, methods: { plusOne(e) { console.log(e); const counter = this.data.counter + 1; this.setData({ counter }); this.props.onCounterPlusOne(counter); // axml中的事件只能由methods中的方法响应 }, }, });

  1. <a name="bFGgc"></a>
  2. #### 5. slot插槽
  4. 1. 默认插槽（只能有一个）
  5. ```html
  6. father.axml
  7. <child>
  8.     <view>i am default slot</view>
  9. </child>
  11. child.axml
  12. <view>
  13.   <slot>
  14.     <view>i am child</view>
  15.   </slot>
  16. </view>
  1. 具名插槽 ```html father.axml i am slot1 i am slot2

child.axml

i am child slot1 i am child slot2 

  2. 3. 具名插槽和默认插槽可以一起使用
  3. <a name="kBxF8"></a>
  4. #### 6. 接口请求
  5. ```javascript
  6. api.js
  8. const API_HOST = 'http://aliisv.beihu.ltd/m.api';
  9. export function getUserInfo(authCode) {
  10.   return new Promise((resolve, reject) => {
  11.     try{
  12.       const url = `${API_HOST}/alipay/demo/alipayUserInfo`;
  13.       my.request({
  14.         url,
  15.         data: {
  16.           authCode,
  17.         },
  18.         success: (res) => {
  19.           if (!res.data.success) {
  20.             reject(res);
  21.           }
  22.           resolve(res.data);
  23.         },
  24.         fail: (error) => {
  25.           reject(error);
  26.         }
  27.       });
  28.     }catch(error){
  29.         reject(error)
  30.     }
  31.   });
  32. }
  34. page.js
  36. import {commenRequest} from '../../utils/api'
  37. async onLoad(){
  38.     let sendData={}
  39.     let res = await commenRequest({_gp,_mt:'',...sendData})
  40.     this.setData({
  41.         ...
  42.     })
  43.   },

7. 页面跳转、传参、收参

  1. //axml
  2. <view data-orderId="{{1}}" onTap="gotoPage"></view>
  3. //页面跳转
  4. gotoPage(e){
  5.    my.navigateTo({
  6.       url:`/pages/orderDetail/index?orderId=${e.target.dataset.orderId}&mark='pagemark'`,
  7.    });
  8. }
  9. //收参
  10. onLoad(options){
  11.     console.log(options)    //{orderId:'1',mark:'pagemark'}
  12. }