微信小程序的基本知识点总结，以及开发经验！

对微信小程序的程序的结构的解析和初始化工作：

小程序中页面放在pages下，一个页面一个文件夹，一个文件夹下四个文件，home.js home.wxml home.wxss home.js的作用，
就是每个页面的初始化在Page({填写js代码}) 还有一个home.json文件，主要是对这个Home页面具体的配置

1.添加页面
2.添加小程序的全局的配置 app.json 中写一个 {}
3.添加全局样式 app.wxss
4.小程序的初始化文件 app.js,对整个小程序进行注册进行初始化app({})

在app.json文件中需要指定页面，在代码中写 { "pages":[ //pages这个名称是固定的，和左边的文件夹没有任何的关联，这里的功能主要是用来指定小程序在使用过程中使用到的页面有哪些，还有一点，json文件中不可以有注释内容，这里我的注释是用来做笔记的，这个pages后面的括号是一个数组 “pages/detail/detail”, "pages/home/home" //这里面谁在第一位，谁就是默认的首页 ] }

小程序的基础知识

注意：全局的配置和页面配置，页面配置的优先级高于全局配置

全局配置：
1.指定需要使用的页面
2.配置页面标题
3.配置页面的tab栏
4.配置各种网络超时时间
5.配置debug模式

{

   "pages":[
"pages/home/home",
 "pages/detail/detail"

]

}

2.配置页面标题
windows属性用于设置小程序的状态栏，导航条，标题，窗口的背景色
{
"windows":{

"navigationBarTitleText":"题"，
“nabigationBarBackgroundColor”:"#3385ff"

}
}

基础知识第二点样式
wxss具有和css大部分的特点
于css相比较，wxss有扩展的特性
尺寸单位
样式导入

尺寸：支持rps宽度，手机屏幕宽度约定为750rpx，推荐使用rpx代替，减少了适配的烦恼

view{
width:750rpx;
}

样式导入：
使用@import的方式可以导入外联样式表，@import后面是要跟着需要导入的外联样式的相对路径用；结束语句
例如：

/ common.wxss/
.small-p{
padding:5px;
}

/app.wxss/
@import "common.wxss";
.middle-p{
padding:15px;
}

注意：局部样式会覆盖全局样式

基础知识第三点组件

和传统的web开发中相似的组件为：
button checkbox for input label
radio textarea audio video cavas

view 用于布局和html中的div一样

text用于放置文本，和html中的span
<view>
<text>
文本
</text>
</view>

image和html中的img一样
<view>
<image src="imagas/logo.png"></image>
</view>

navigator 导航标签和html中的a标签一样，只是不同的名称
<view>
<navigator url="" hover-class="">
跳转到新的页面
</navigator>
</view>

注意：如果一个页面被bar指向跳转了，那么这个页面在其他的页面中就不可以指向跳转了！！

轮播图 swiper组件

<swiper-item>
<image src='http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'></image>
</swiper-item>

</swiper>

自动轮播 autoplay 轮播时间interval

小程序牛逼的数据渲染的方式

数据渲染：

1.数据绑定
2.列表渲染
3.条件渲染

小程序使用绑定的方式代替传统的网页中dom操作的方式来呈现数据5

演示：添加一个test页面，用于演示
1.数据绑定：自动化将数据呈现到页面

使用Mustache语法（双大括号）将变量包起来！

test.js

page({

//页面中药使用的数据，添加到data对象中
data:{

user:{  

     id:10,
    age:18,
     name:'小明'

}
}

})

test.wxml中

<view>
//{{}}中直接书写js中的data对象中的数据，既可以展示！
<text id="{{user.id}}">
我叫{{user.name}},
今年：{{user.age}}岁了
</text>
</view>

补充：
Mustache语法支持书写js表达式

例如：
<view>
{{ 1+1}}
{{1+'1'}}
{{user.age+1}}
</view>

补充2：
调用this.setDate({})可以更新当前的页面的数据！
例如：

Page({
date:{
name:"小红"
}，
xxx:function(){
this.setData({name:"小天"})
}
})

2.列表渲染

在组件上使用wx:for控制属性绑定一个数组，既可以使用数组中的各项的数据重复渲染该组件

test.js

Page({
data:{
array:[
{message:'张三'},
{message: '李四'}
]
}
})

test.wxml

<view wx:for="{{array}}">
{{index}}对应着 {{item.message}}
</view>

补充：
wx:for-item="自己用的名称"
指定当前的元素名
wx:fpr-index=“自己用的索引名”
指定当前的索引名

就是说你不想用这个本来的自带的名称可以在遍历的时候指定给予一个名称！

例如：

{{i}}对相应 {{itm.message}}
</view>

注意：{{}}表示是从data中拿的数据

补充2：
在遍历的时候，官方推荐我们在遍历的时候加上一个wx:key="item.id"来给要遍历的元素指定一个唯一的标识
这个id是每一个遍历的元素都有一个id

例如：
test.js

Page({
data:{
array:[
{message:'张三' ,id: 1},
{message: '李四',id: 2}
]
}
})

<view wx:key={{item.id}}"
wx:for="{{array}}">
{{index}}对应着 {{item.message}}
</view>

补充3：
block标签遍历

<block wx:for="{{array}}">
<view>索引：{{index}}</view>
<view>数据：{{item.message}}</view>
</block>

遍历以后block标签就不存在了，这个标签只是用来临时辅助遍历的作用！

3.条件渲染
在小程序使用wx : if="{{conditiaon}}"
来判断是否需要渲染该组件

也可以使用wx:elif和wx:else来添加一个else块：
<view wx:if="{{lenth>4}}">
满足条件的代码
</view>

<view wx:elif="{{lenth>2}}">
满足条件的代码
</view>

<view wx:else>
满足条件的代码
</view>

注意点：
何时推荐使用wx:if ，就是在元素无需频繁的呈现和隐藏的时候

何时推荐使用样式来隐藏与显示，就是需要频繁的呈现和隐藏

小程序的事件机制

事件注册：

小程序中有自己特定的为组件注册事件的方式，不在像传统的网页中使用addEventListener进行注册

注册事件的方式:

使用bind +事件名称的方式，为元素注册事件

以点击事件为例：事件名为 tap，不是clik了

test.js
Page({
//自定义的事件响应函数
tapName:function(event){
console.log(event)

}

})

test.wxml中

补充：

阻止事件冒泡
<view catch: tap="tapName“>
代码
</view>

例如：

<button catch:tap="test">
测试阻止冒泡
</button>
</view>

这个时间的冒泡的意思就是：
当我点击是测试阻止事件冒泡
的按钮时候，不会触发到上面那个
事件。

微信小程序的基本知识点总结，以及开发经验！