小程序新手入门之基础知识

一、前置知识

1、注册帐号，获取appid。

2、微信开发者工具：调试小程序、公众号

3、与普通网页开发的区别：

（1）运行环境：网页开发渲染与脚本在同一个线程上，而小程序分为渲染层和逻辑层。逻辑层运行在jscore中，并没有DOM和BOM。jscore环境与node也不同，所以也无法使用一些npm包。

（2）兼容性：
ios，安卓，小程序开发者工具3种环境，逻辑层与渲染层各不相同。

运行环境

（3）整个小程序所有分包大小不超过 8M；单个分包不可超过2M

（4）开发流程：开发版本 ---> 体验版本 ---> 审核中版本 ---> 线上版本 ---> 发布
ps：若用户未主动删除小程序，发布后最差24小时下发新版本（解决办法：可通过启动时检查更新）

二、小程序结构及配置

1、项目结构

--images
--pages
  --index
      --index.js
      --index.json
      --index.wxml
      --index.wxss
  --logs
      --index.js
      --index.json
      --index.wxml
      --index.wxss
--app.js
--app.json
--app.wxss
--project.config.json

2、配置文件
（1）project.config.json
开发者工具自动生成的一个配置文件，和开发者工具中【详情】的配置一样，一般不做更改。官方文档

（2）app.json：全局配置文件。官方文档
举个栗子

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
     "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "XX小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#a5a5a5",
    "selectedColor": "#f63232",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/course.png",
      "selectedIconPath": "images/course_red.png",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "iconPath": "images/study.png",
      "selectedIconPath": "images/study_red.png",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ],
  "sitemapLocation": "sitemap.json"
}

（3）页面配置：附上官方文档
每个页面都可以有.json文件，页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。页面的window属性会覆盖全局window属性。

{
    "usingComponents": {
        "ErrorPage": "./components/ErrorPage/index",
        "PPTLive": "./components/PPTLive/index",
        "Classroom": "./components/Classroom/index",
        "Loading": "./components/Loading/index"
    },
    "disableScroll": true,
    "pageOrientation": "landscape",
    "navigationStyle": "custom"
}

三、小程序开发

1、宿主环境

宿主环境

通信：渲染层和逻辑层分别是2个线程管理。小程序的每个界面都是一个webview线程。渲染层和逻辑层通过微信客户端做中转。
数据驱动：通过native

2、程序

// 程序构造函数。app实例是单例对象， js中可以通过getApp() 获取该对象
App({
  onLaunch: function(options) {}, // 小程序初始化完成时触发，only once
  onShow: function(options) {}, // 小程序启动，或从后台进入前台显示时触发
  onHide: function() {}, // 前台进入后台触发
  onError: function(msg) {}, // 脚本错误或api吊用失败时触发，带上错误信息
  globalData: 'I am global data'  // 全局data
})

因为小程序有多种渠道打开，所以onLaunch和onShow可以带options参数，包含path，query，scene，shareTicket等。
globalData：切换webview时，还是公用一个jscore，因为App是单例，所以可以通过app实例获取全局数据。

3、页面

step1：创建js、json、wxml、wxss4个文件
step2：app.json中声明页面路径
step3：js文件中使用个页面构造器Page()

Page({
  data: { text: "This is page data." },
  onLoad: function(options) { }, // 页面首次加载，only once，早于onShow和onReady，options是
  onShow: function() { }, // 页面每次加载
  onReady: function() { }, // 页面初次渲染完成
  onHide: function() { }, // 页面隐藏
  onUnload: function() { },  // 页面卸载
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

还可以添加任意的函数或数据，在Page实例的其他函数中用 this 可以访问

step4：wxml文件中写页面结构
1）标签略有不同：view、text、image、button、block等等
2）数据绑定： {{}}
3）wx:if, wx:for
step5：wxss中写样式
1）单位：rpx（responsive pixel）；以iphone6换算，1px=2rpx
进阶tips：wxs (官方文档)
1）WeiXin Script运行环境与js隔离，ios中比js快2~20倍，android中差不多
2）运行在视图层，适用于频繁交互场景：如滑动吸顶等

4、组件：小程序提供了很多组件，scroll-view，swiper，picker，live-player，web-view等等

原生组件：层级第二高，其他组件的无法盖过原生组件。z-index无效。camera、canvas、input、live-player、live-pusher、map、textarea、video。
层级第一高：cover-image、cover-view

5、自定义组件：

Component({
  behaviors: [], // 类似mixins
  properties: {  // 页面传值
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },  // 在组件实例进入页面节点树时执行
    moved: function () { },  // 在组件实例被移动到节点树另一个位置时执行    
    detached: function () { },   // 在组件实例被从页面节点树移除时执行
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { }, //在组件在视图层布局完成后执行   

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    }
  }
})

6、api：宿主环境提供的一系列功能附上官方文档

基础：系统、调试等方面的api
路由：页面间的跳转
1）wx.switchTab
2）wx.reLaunch
3）wx.redirectTo
4）wx.navigateTo
4）wx.navigateBack
界面：通用的toast、loading、导航栏、动画等
网络：wx.request等
设备能力：蓝牙、扫码、屏幕

7、事件

渲染层传递给逻辑层
常用：点击、触摸、长按等

<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

// page.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})

四、项目介绍（wepy框架）

风格类似vue，上手快，开发简单方便
支持第三方npm包
优化：单文件、polyfill（es6）、样式编译器