小程序(1)

1.结构

index.wxml 静态页

index.wxss样式文件

index.js 页面所需js

index.json 页面所需配置文件   ***注意名字保持统一

---

2.小程序组件 写法

子  tab.wxml 定义结构

     tab.wxss定义样式

     tab.js定义所需js

    tab.json 及时不需要配置 也需要写固定格式  {"components":true,"usingComponents":{}}

父 在json中定义配置项

   {

  "usingComponents":{

  组件名：组件路径

  }

  }

在wxml文件中  <组件名  子组件data名="父组件data名"></组件名>

*通过  子组件data名="父组件data名"  对子组件进行赋值

子  json中定义配置项  { ‘component’:true,'usingComponents':{}}

在js中  Component({

protries:{}//***  对子组件属性值 进行定义

data:{}

methods:{}//***方法要写在methods中***

})

properties 对子组件属性值进行定义

properties:{

title:{

type:'String',//类型限制

value:'标题'  赋值

}}

内部私有方法

_cancal_fn:function(){

this.triggerEvent('父级事件名')}  //利用triggerEvent  触发父级自定义事件

---

3小程序template

只是结构单独列出来   剩余的js  wxml还是要写在父级中   

优：会使页面结构更加干净  利于阅读性 缺：需要传data  变量并没有减少 如不同名  管理起来可能会更加复杂

a 子组件 定义<template name="模板名字"></template>

b 父组件  引用<import src="模板路径"/>

使用<template is="对应的模板名字"></template>

传值与组件传值方法相同

---

4小程序自带组件（常用）

a.icon  提示性图标   icon  type=> success warn info  size=>    color=>  

b.表单组件  button要在行间写width height 否则宽度会特别大 也可用view代替

c.<checkbox-group bindchange="">

<label>

<checkbox></checkbox>

</label>

</checkbox-group>

bindchange事件中含有  e.detal.value

d.<input bindinput  bindfocus bindblur事件

type合法值   number idcard text digit(可以输入小数点)

e.picker 顶部弹起的滚动选择器

多列picker省份城市选择器  mode=multiSelector   后详细举例

f. scroll-view 可滚动视图区域

bindscrolltolower 监听向下滚动事件

scroll-x scroll-y 允许滚动方向

bindscroll 监听滚动事件

g navigation-bar