小程序

1.警告信息显示与隐藏

project.config.json => setting => checkSiteMap （false / true）

2. App.json设置

创建文件和切换主页面显示 app.json => pages => ""

全局下拉刷新 app.json => window => "enablePullDownRefresh": true

下拉背景颜色配置 app.json => window => "backgroundColor" : "16进制颜色"

下拉文本颜色 app.json => window => "backgroundTextStyle": "dark / light"只能选其一

自定义tabBar
新建文件夹 custom-tab-bar => 右键新建component  必须是index

app.json 导航栏tabBar

"tabBar": {
    "custom": true, // 照顾低版本得
    "list": {
        "pagePath": "当前页的路径",
        "text": "当前页的名称",
        "iconPath": "/没点过的字体图标", 
        "selectedIconPath": "/选中的时候字体图标"
    }
}

3.常用标签

<view></view> == <div></div>

<text></text> == <span></span>

<image/> == <img/>

<navigator url="" /> == <a href="" />

<scroll-view> </scroll-view>滚动组件 需要配和 scorll-x 横向滚动，scroll-y 纵向滚动

<swiper> <swiper-item></swiper-item> </swiper> 轮播图

<navigator url="/" open-type="switchTab"> </navigator>(tarBar导航栏)声明式导航

<navigator url="/"> </navigator> 非tabBar导航栏内可省略不写open-type="switchTab"

编程式导航（tabBar导航栏）方法内 wx.switchTab({ url: '/路径' })

编程式导航 (非tabBar导航栏) 方法内 wx.navigateTo({ url: '/路径' })

4.事件

1.触摸(点击) 事件 bindtap 传参 data-自定义="{{}}"

接收传参 e.target.dataset.自定义

2.input 事件 bindinput

接收input的value e.detail.value

5.方法

1. wx:if wx:elif wx:else 显示与隐藏是操作DOM
2. hidden 显示与隐藏是操作 css样式隐藏
3. wx:for 是循环遍历 wx:for-index="自定义index索引" wx:for-item="自定义item值"

6.生命周期

Page({
onLoad : function (options) { }, // 监听页面加载，一个页面只调用一次
onShow : function () { }, // 监听页面显示
onReady : function () { }, // 监听也买你初次渲染，一个页面只能调用一次
onHide : function () { }, // 监听页面隐藏
onUnload : function () { } // 监听页面卸载，一个页面只能调用一次
})

7.wxs脚本 注意只能使用es5

内联式定义

<wxs module="自定义"> module.export.方法名 = function (str) { return str.方法 }</wxs>

内联式脚本使用 {{'自定义'.方法名( 待修改的状态 )}}

外联式定义

以.wxs的文件， 定义方法 module.exports = { 方法名: 方法名 } // 因为es5没有简写所以必须写全

外联式调用 <wxs src="/路径" module="自定义"></wxs> 使用跟内联式一样

---

注册全局组件

app.json => "usingComponents": {

 **"自定义组件名": "/ 组件的路径"**

}

8.组件注意事项

1.properties 接收外面的状态 === data 组件自己的状态

2.方法都要写在methods 如果要改对象中的某个数据 '对象.数据 ‘

3.组件中的监听器 observers 与 methods同级

# '监听的数据.**' 对象数据比较多的情况用通配符来

observers: {
    '监听的数据.**': function (obj) {
        this.setState({
            修改的数据: obj.**
        })
    }
}

9.组件的生命周期

// 组件的生命周期
lifetimes: {
    created() {
        
    },
    attached() {
        
    }
},
// 监听组件的生命周期
pageLifetimes: {
    show() {
        页面显示进入此钩子
    }
    hide() {
        页面隐藏进入此钩子
    }
}

10. 组件插槽 和 样式隔离

optaions:  {  
   multipleSlots: true,  // 开启多个插槽
   styleIsolation: (apply-shared (页面单方面影响组件样式), shared(互相影响)) // 样式隔离
}

11.组件父传子，子传父

// 父传子
<子组件 子接收父亲的变量="{{ 父亲的data值 }}"></子组件>
子组件的js => properties: { 变量名: 类型 } // 接收的状态值  

// 子传父
<子组件 bind:自定义事件名="父组件的方法"></子组件>
子组件内的js， this.triggerEvent('自定义事件名',{ 传给父组件的 (对象) })
父组件的方法通过 e.detail.对象名 来获取子传父的值
                                     
// 获取子组件的实例对象
<子组件 class="自定义" / id="自定义"></子组件>
父组件的方法内 (可以获取子组件的实例对象)
const child = this.selectComponent('.自定义类') / ('#自定义id')

12.behavior 公共状态

module.exports = Behavior({
    // 属性节点(接收外面传来的数据)
    properties: {},
    // 私有数据
    data: {},
    // 事件处理函数和自定义方法节点
    methods: {},
    ...
})

13.定义样式变量

Page {
    --开头: 色域;
}

14.小程序的项目API promise化

app.js 
import { promisifyAll } from 'miniprogram-api-promise' // 导入下载的包

const wxp = wx.p = {}

promisifyAll(wx,wxp)

15.Mobx

// store.js 创建 mobx
import { action, observable } from 'mobx-miniprogram' // 导入下载的包

export const store = observable({
    // 状态
    (自定义): 1,
    // 计算属性
    get 自定义() {
        retrun this.num 
    } 
    // 方法
    自定义: action(function (step) {
        this.自定义 += step
    })
})

// 在其他的页面导入store  js文件 (非组件内)
import { createStoreBindings } from 'mobx-miniprogram-bindings' // 导入下载的包
import { store } from '../../store/store'

Page({
    
   // 生命周期 -- 监听页面加载
   onLoad: function (options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA','numB','sum'], // 数字字段，计算属性
      actions: ['updateNum1']  // 方法
    })  
   },
    
  // 生命周期 -- 监听页面卸载
  onUnload: function () {
    this.storeBindings.destoryStoreBindings()
  },
    
})

// 组件内导入store
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' // 导入下载的包
import { store } from '../../store/store'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {   // 数字字段，计算属性
      numA: 'numA', 
      numB: 'numB',
      sum: 'sum'
    },
    actions: {
      updateNum2: 'updateNum2'  // 方法
    }
  },
})

16.分包

// app.json 创建分包  
"subPackages": [
    {
      "root": "自定义", // 分包的文件夹名
      "pages": [
        "pages/cat/cat" // 分包的子分包
       ],
      "name": "起别名", // 分包的别名
      "independent": true  // 开启独立分包 (独立分包不能使用主包的公共资源)
    }
  ],
    
// 分包预下载
"preloadRule": {
    "这是主包的子包路径": {
        "packages": ['分包的name / 或者root'],
         "network": "all / wifi" // 指的是wifi下载分包,还是所有得网络情况都下载分包
    }
}

17.忽略git上传文件

新建 .gitignore 
忽略文件
/node_module
/unpackage/dist  // 注意要将unpackage目录下创建一个 .gitkeep

18.mixins 公共状态数据

实例
mixins文件夹 => 自定义.js

// 创建
import {mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters('m_cart',['total'])
  },
  onShow() {
    this.setBadge()
  },
  methods: {
    setBadge() {
      uni.setTabBarBadge({
        index: 2,
        text: this.total + ''
      })
    }
  }
}

// 引用
import 自定义 from '@/mixins/自定义'
export default {
    mixins: [tabBarMix]
}