微信小程序初始

1、小程序是什么？
     小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便    捷地获取和传播，同时具有出色的使用体验。

2、微信小程序的优势和劣势
     优势：（1）微信助理，容易推广（2）使用便捷 （3）体验良好，有接近原生app的体验。（4）成本更低
     不足：（1）单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（2）需要像app一样审核上架，这点相对于H5的发布要麻烦一些。（3）处处受微信限制

3、项目的目录结构
     pages:
    wxml: 编写小程序界面结构的地方
    wxss: 编写小程序样式的地方
    json：编写界面配置的地方
    js：编写界面逻辑的地方
utils: 编写工具类的地方
app.js：创建程序实例的位置
app.json: 编写全局配置地方
app.wxss: 编写全局样式的地方
project.config.json: 项目的配置文件
sitemap.json：配置哪些网站可以被检索到

4、小程序模板语法WXML  全称 WeiXin Markup Language 是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
     （1）标签的使用：view ---> div   text ---> span  image ----> img  
      https://developers.weixin.qq.com/miniprogram/dev/component/
      （2）数据定义：data: {
    msg:"hello world",
    num: 18,
      },  
      （3）引用数据  <view>{{num +10}}</view>
        (4)逻辑渲染 <view wx:if="{{condition}}"> True </view>
    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    <view hidden="{{condition}}">隐藏</view> 通过操控display来实现
      （5）列表渲染：  在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
    使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
    <view wx:for="{{array}}" wx:for-index="idx" wx:for-    item="itemName">
      {{idx}}: {{itemName.name}}
    </view>
        （6）Key       wx:key 的值以两种形式提供：
    1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
    2.保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。 
         （7）Template ： WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，
    使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
    引用：WXML 提供两种文件引用方式import和include。
    Import：只导入template的内容，import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
    include：导入除了template，

5、小程序样式wxss
    （1）尺寸单位 ：1rpx = （屏幕宽度/750）px
    （2）样式的导入:@import './test_0.wxss'
    （3）小程序中的样式选择器 ：类名选择器 .class    id选择器 #id  元素选择器 view        伪元素选择器  ::after   ::before 

6、小程序中的JS 
     （1）小程序中的js和浏览器中和node中的区别
    浏览器中JS:ES、DOM、BOM  
    Node中的JS：ES、NPM、Native    
    小程序中的JS:ES、小程序框架、小程序API
     （2）小程序目前可以运行在三大平台：
    1.iOS平台，包括iOS9、iOS10、iOS11
    2.Android平台
    3.小程序IDE

7、小程序中的数据渲染
    JS是单线程的
      （1）小程序和浏览器中有什么不同：浏览器中渲染是单线程的。
    而在小程序中的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
      （2）在 JS 脚本使用 this.setData 方法把 msg 字段设置
    this.setData({ msg: 'Hello World' })
    可以看到3个点：
    1.渲染层和数据相关。
    2.逻辑层负责产生、处理数据。
    3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

8、程序和界面
   （1）程序:“小程序”指的是产品层面的程序，而“程序”指的是代码层面的程序实例，为了避免误解，下文采用App来代替代码层面的“程序”概念
    App({
      onLaunch: function(options) {},
      onShow: function(options) {},
      onHide: function() {},
      onError: function(msg) {},
      globalData: 'I am global data'
    })
     globalData全局数据  获取全局数据： let app = getApp()

      onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    onLaunch(){}
      onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
    onshow(){}
      onHide：当小程序从前台进入后台，会触发 onHide
    onHide(){}
      onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
    onError(){}
     其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。
    （2）Page:一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转。
    （3）页面构造器
    Page({
      data: { text: "This is page data." },
      onLoad: function(options) { },
      onReady: function() { },
      onShow: function() { },
      onHide: function() { },
      onUnload: function() { },
      onPullDownRefresh: function() { },
      onReachBottom: function() { },
      onShareAppMessage: function () { },
      onPageScroll: function() { }
    })
      (4)生命周期
    onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady
    onReady：生命周期函数--监听页面初次渲染完成
    onShow：生命周期函数--监听页面显示，触发事件早于onReady
    onHide：生命周期函数--监听页面隐藏
    onUnload：生命周期函数--监听页面卸载
    注意事项：
    直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
    由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
    不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。
      （5）页面的用户行为：
    onPullDownRefresh 下拉刷新
    onReachBottom 上拉触底
    onPageScroll 页面滚动
    onShareAppMessage 用户转发 ;Page({
    onShareAppMessage: function () {
     return {
       title: '自定义转发标题',
    // 自定义点击链接需要跳转的页面，默认当前页面
       path: '/page/user?id=123'
     }
    }
    })
      （6）事件
    （1）事件定义
    <view bindtap="handleTap">点击事件</view>
    <view bind:tap="handleTap">另一种写法</view>
    Page({
        handleTap(){
            console.log("执行了点击事件");
       }
    })
    （2）事件类型
    touchstart    手指触摸动作开始
    touchmove    手指触摸后移动
    touchcancel    手指触摸动作被打断，如来电提醒，弹窗
    touchend    手指触摸动作结束
    tap    手指触摸后马上离开
    longpress    手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
    longtap    手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
    transitionend    会在 WXSS transition 或 wx.createAnimation 动画结束后触发
    animationstart    会在一个 WXSS animation 动画开始时触发
    animationiteration    会在一个 WXSS animation 一次迭代结束时触发
    animationend    会在一个 WXSS animation 动画完成时触发