uni-app概念（新增）

定义组件

easycom

文件夹     components/组件名/组件名.vue
不需要导入可以在页面中直接使用
uni_ modlues/components/组件名/组件名.vue
 (这种模式也是可以）

定义组件

    .vue文件就是一个组件(vue是一致)

组件传参

1.父传子：props
    1.1父通过属性的方式传递个字组件
        <steper :value="d1" ></steper>  
	1.2子通过props接收
             props:{
             11接收参数value
             value:{
             type:Number, 1数字类型默认值为1
             default:1,
    1.3 子组件可以使用
          this .count = this.value
2.子传父 事件$emit
    2.1 子触发事件.
         this.Semit"input .this.count)
    2.2 父监听事件更新值
        <steper :value-"d1" @input= "d1 = $event"></steper>

3.全局传参：uni.$on
    3.1全局发送事件
         uni.$on("事件名",事件值)
    3.2 全局监听(发送事件前已经注册监听)；created生命周期；uni.$on("事件名",$event=>{响应操作})

uni-扩展组件

uni内置扩展组件-兼容多端
uni-countdown
uni-swiper-dot
uni-popup
uni-popup-dialog

uni-插件市场

uview

原生微信组件如何使用

1.wxcomponents //存放插件
2.pages.json导入
	{
		"path": "pages/condition/min",
		"style": {
			"navigationBarTitleText": "min组件",
			"mp-weixin": {
				"usingComponents": {
					"item": "/wxcomponents/item/item"
				}
			}
		}
	},

v-model是简写

<steper :value="d1" @input="d1=$event"></steper>
<steper v-mdel="d1"></steper>

vuex

初始化

1. store/index.js
    import Vuex from 'vuex'
    import Vue from 'vue'
    Vue.use(Vuex)
    export default new Vuex.store({
    state,
    mutations,
    actions, .
   	getters,
    modules
2. main.js
     import store from './store/index.js'
     Vue.prototype.$store = store;

vuex的模块

state存放数据
mutations更新数据(唯一方式)
actions动作(异步api操作)
getters计算，从现有的state计算出新的数据
modules 模块

state 定义数据

 1.    state: {
         gTitle:{
         text:"你好Vuex",
         color:"#000",
         fontSize:"24px",
         background:"#f70"
         }
     }
2. 在页面中使用
    	 $store.state.gTitle.text
3. 修改只能通过mutations
4.组件中简写
       4.1导入 import {mapState} from 'vuex'
       4.2计算 computed:{
          ...mapState(["gTitle"])
         }
       4.3 <view :style="gTitle">

mutations改变数据

1. setFontSize ( state,data) {
        state.gTitle.fontSize=data+"px"
     }
2.  在页面中使用
    	 this. $store.commit("setFontSize'',80)
3.  简写
      3.1 import {mapMutations} from 'vuex';
      3.2  methods: {
         ...mapMutations(["setFontSize"])
          },
      3.3  this.setFontSize(100)

actions异步操作

1 . 定义
	         getJok(content,data){
	                                 uni.request({
	                                         url:"http://520mg.com/mi/list.php",
	                                         method:'GET',
	                                         data:data,
	                                         success:res=> {
	                                                console.log(res,"getJok");
	                                                 //actions去调用mutations
	                                                 content.commit("setJoks",res.data.result)
	                                        }
	                                 })
	              }
2. 页面中使用
    		 this.$store.dispatch("getJok",{page:1})
3. 简写
	        3.1 导入
	         import {mapActions} from 'vuex';
	         3.2计算
	         methods: {           
	                                 //把actions映射为本地方法
	                                 ...mapActions(["getJok"])
	                         },
	         3.3使用 this.getJok()

getters计算

1. getters:{
                     "totalLen":function(state){
                             //reduce累计
                             var count = 0;
                             for(var i=0;i
                                     count+=state.joks[i].summary.length;
                             }
                             return count;
                     }
        },
2.在页面中使用
    		 this.$store.getters.totalLen
3. 简写
    3.1 导入
     import {mapGetters} from 'vuex';
    3.2 计算
     computed:{
              ...mapGetters(["totalLen"])
      },
    3.3 使用
     this.totalLen

actions中的context

1. commit
    	执行mutations方法
2. dispatch
  		 执行actions的方法
3. state数据
4. getters计算出来的是数据