今天老师讲了微信小程序，通过今日份的学习，现在做下总结

首先微信小程序是小程序的一种，是张小龙在2017年1月9日发布的，全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系

首先是它和H5的区别吧

1，微信小程序没有完整的JS API 但是H5拥有完整的JS API
2，渲染机制不同：微信小程序渲染线线程和逻辑线程是独立并行运行的，而H5只是一个线程
3，微信小程序扩展了底层能力，H5调用底层能力比较弱（底层能力：调用移动端的相机，定位，通讯录等能力）

四、微信小程序开发目录说明

1. pages

项目开发目录 相当于vue脚手架中的src目录

一个完整的小程序页面包括4部分：
1. xxx.wxml :模板页面（也称视图，类似于html）
	
	常用标签：
		view:相当于div
		button:按钮
		image:嵌入图像  类似于img
		text:添加文本 相当于span
		block:标签一个组织区域，最终不会渲染到页面上，相当于vue中的template
		
2. xxx.wxss:页面样式 相当于css

   注意：用rpx代表响应式单位 类似于rem
   
3.xxx.js: 写页面逻辑的 

4.xxx.json:页面的配置

  注意：页面的json配置来源于全局（app.json）配置中window字段
  
参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

2. utils

存放封装的工具函数的目录

3. app.js

是小程序的入口js文件 相当于vue中的main.js
通过App({})构造器实现

4. app.json

小程序的全局配置

例如：

{
//小程序管理的所有页面路径
  "pages":[  
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  //小程序的窗口表现
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "1909A",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

5. app.wxss

是小程序的全局css样式，全影响所有的页面外观

6. project.config.json

工具的统一配置

7. 如何给小程序添加新的页面

在app.json的pages中直接添加新建的页面路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cate/cate",
    "pages/shopping/shopping"
  ],
 
....

}

默认tabBar最少是2项，最多是5项

但可以通过自定义tabBar来突破这个限制

如何实现自定义TabBar?

核心实现思路：通过禁用app.json默认tabBar,创建一个自定义tanB组件来实现

官方参考：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

8. wxss相关

rpx:（responsive pixel）: 可以根据屏幕宽度进行自适应

  使用：量多少使用多少 用ps测量 100px,就是100rpx

参考设计师可以用 iPhone6 作为视觉稿的标准

样式导入：@import  主要用于复杂项目样式复用

9. 小程序常用渲染指令

1.遍历 wx:for  相当于vue的v-for

例如：
 <view wx:for="{{ list2 }}" wx:for-index="n" wx:for-item="itm">
           <text>编号：{{ n+1 }}---姓名：{{ itm.name }}</text>
 </view>
 
 注：
 item：遍历的每一项
 index:每一项的下标
 wx:for-index:更改下标名
 wx:for-item:更改每一项的名称
 
 2.条件渲染
 
  wx:if 相当于vue的v-if       true:显示，false：隐藏
  
   wx:if  满足条件渲染
   wx:else  不满足条件渲染
  
  
  hidden 相当于vue的v-show的反值   true:隐藏，false：显示
  

10. 小程序如何绑定事件

bind+事件名="方法名"

例如：
 <button bindtap="deleteItem">X</button>
 
 交互过程中视图不同步如何解决？
 
 this.setData()
 
   this.setData({
     list2: this.data.list2
   })
 
 

11. 页面之间如何传参

自定义属性：将页面上的参数传递给js

  <view data-自定义名称="参数值">
  
 通过触发事件，在事件方法中接收
 
  let {index}=e.currentTarget.dataset
  
  deleteItem(e) {
    let {index}=e.currentTarget.dataset
    console.log(index)

   
  },

路由跳转传参:页面与页面之间传参

微信小程序的学习主要还是要来依靠vue和react的相关语法来进行学习，例如：this.setData这个用来更新视图的就是react中有关的，而那些for循环之类的都与之前的学习有异曲同工之妙，多多理解结合以前的 发现微信小程序也并不是那么难搞

今天遇到的难题及解决方法：

	再写微信小程序的的时候发现我写了input标签却没有反应，最后问问同桌才知道要给这个标签加上border属性。。。。。。
	所以，如老师所说，真正学习一门语言就要先看上两三遍官方文本文档。不会的知识百度啊，问同学，看文档，解决问题的能力我觉得还是挺重要的，今天博客记录到此结束！明天加油！