小程序基础（一）：环境搭建和基本布局

1. 注册小程序账号

  https://mp.weixin.qq.com
  申请小程序AppID

2. 安装微信官方小程序开发工具

		下载并安装微信小程序开发工具

3. 新建项目

  选择小程序AppID，选择javascript，新建本地项目

4. 小程序目录

	breezemini/
		|-- images/   	# 图片
		|-- template/ 	# 模板
		|-- utils/ 			# 工具组件
		|-- pages/ 			# 页面
			  |-- logs/    	# 日志页面
			  |-- index/  	# 后台API目录
			      |-- index.js			# 页面逻辑，必须
			      |-- index.json		# 页面配置
			      |-- index.wxss		# 页面样式
			      |-- index.wxml		# 页面结构，必须
		|-- app.js			# 入口文件，必须
		|-- app.json		# 全局配置文件，必须
		|-- app.wxss		# 全局样式文件，非必须

5. app.json配置文件

注意：tabBar中的list第一项必须是pages中默认项（即第一个page），否则tabBar无法显示

{
  "pages": [
    "pages/shop/shop",
    "pages/classic/classic",
    "pages/classic-detail/index",
    "pages/about/aboutus",
    "pages/template/template",
    "pages/font/font"

  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#E43130",
    "navigationBarTitleText": "清风谷",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default",
    "backgroundColor": "#ccc",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#2BA6FC",
    "backgroundColor": "#fff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/classic/classic",
        "text": "经典",
        "iconPath": "/images/icon_category.png",
        "selectedIconPath": "/images/icon_category_active.png"
      },
      {
        "pagePath": "pages/about/aboutus",
        "text": "关于",
        "iconPath": "/images/icon_me.png",
        "selectedIconPath": "/images/icon_me_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 10000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

6. 小程序生命周期

		onLoad()
		onShow() 可多次触发
		onReady()
		onHide() 可多次触发
		onUnload()	

7. wxml语法

7.1 数据绑定和赋值

this.setData() 逻辑层向视图层发送数据，让视图层重新渲染
{
  {}} 数据绑定

//--	
  onLoad(options) {
console.log(this.data.age)
//箭头函数 (()=>{},)
setTimeout(()=>{
  this.setData({
    name:"李四"
  }) 
},1500);

// pages/classic/classic.js
  data: {
   
    text:"测试数据",
    age:70,
    name:"张三",
    students:[
      {
   id:1,name:'李四',age:30},
      {
   id:2,name:'王五',age:31},
      {
   id:3,name:'赵六',age:32},
      {
   id:4,name:'钱七',age:33},
      {
   id:5,name:'周处',age:34},

    ]
  },

7.2 for

<!--pages/classic/classic.wxml-->
<!-- 指定循环key block书写不解析属性-->
<block wx:for="{
    {students}}" wx:for-item="val" wx:for-index="key" wx:key="students">
  <view>
    <view>ID:{
  {key}}--{
  {val.id}}</view>
      <view>{
  {val.name}}</view>
      <view>
        age:{
  {val.age}}   
      </view>
  </view>
</block>

7.3 if elif else

<!-- if是一个整块，中间不能有其它标签 -->
<block wx:if="{
    {age<=10}}">
  <view>儿童</view>
</block>
<block wx:elif="{
    {age<=20}}">
  <view>青年</view>
</block>
<block wx:elif="