1、微信小程序诞生的前景：

1、受到手机内存的限制，用户无法下载诸多app
2、用户为了简洁性不愿意下载app
3、微信用户的日益增加

2、微信小程序的特点：

微信小程序的理念是”触手可及，用完即走” ，是一种不需要下载安装即可使用的应用。
一次开发，多终端适配（不用适配ios或android）
途径：通过微信(扫描二维码、搜索、分享)即可获得，和微信共用内存使用，占用内存空间忽略不计

3、微信小程序与h5页面的比较：

1、运行环境不同：
h5运行环境是浏览器（包括webview）
小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器（微信端内）
2、获取系统级权限不同：
微信小程序相对于H5能获得更多的系统权限（网络状态、WIFI、蓝牙、屏幕亮度...）
3、运行流畅度：
H5：网页需要在浏览器中渲染。所以加载这一过程，会给人明显的「卡顿」感觉，复杂逻辑h5尤为明显。
微信小程序：代码直接在微信上运行，省去了通过浏览器渲染，因此会比H5流畅很多，
小程序各个页面的切换、跳转等体验已经媲美原生App

4、微信小程序与原生APP的比较：

小程序的劣势：
1、从技术层面来说，小程序的体验不及APP
2、从功能体量上来说，小程序不及APP
3、从开放性来说，小程序不及APP
APP的劣势：
1、开发维护成本高：安卓与IOS独立开发，维护起来相对也比较麻烦；
2、留存率低：APP打开的频率很大程度上决定它的留存率，如果不是经常使用的而可能很快就卸载了；
3、推广成本高：APP在没有一定知名度前提下，推广的成本很高，获客成本高；
4、上传APP路径复杂：上传至APP需要通过store或应用市场的确认。

5、微信小程序开发

开发文档（包括开发工具、教程及官方中文文档）：
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html

5.1、准备工作

1、申请账号并注册成为微信平台的开发者,并获取AppID(小程序ID)（详细步骤看官网）
2、安装开发工具并登陆：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3、创建小程序项目，并写入小程序ID（AppID）

5.2、项目目录及文件

1、page：是小程序的路由，默认情况下存在两个页面，一个首页，一个日志打印页。
每个页面下可以有4种文件
index.js:配置该页面的变量、函数、生命周期等
index.wxml:类似于html文件，配置当前页面的结构
index.wxss:类似于css文件，配置当前文件的表现
index.json:当前页面的小程序配置（配置小程序窗口背景色，导航栏样式，标题等）
2、utils：工具包，一般是常用的一些封装h哦的函数（时间格式化、数字格式化等）
3、app.js：小程序全局脚本控制（ 监听小程序的生命周期，生命小程序的全局变量等）
4、app.json：整个小程序的全局配置，配置有哪些页面构成，配置全局的配置（小程序窗口背景色，默认配置，如果其他页面有配置，则被覆盖）
5、app.wxss：小程序的公共样式
6、project.config.json：项目整体配置文件，包括项目描述、打包忽略文件夹、转义es5、自动压缩等（具体如下图）

{
    "description": "项目配置文件",  //描述
    "packOptions": {  //用以配置打包时对符合指定规则的文件或文件夹进行忽略
        "ignore": []
    },
    "setting": {  //项目设置
        "urlCheck": false,  //不检查安全域名和 TLS 版本
        "es6": true,  //启用 es6 转 es5
        "postcss": true,  //上传代码时样式自动补全
        "minified": true,  //上传代码时自动压缩
        "newFeature": true  //新特征，文档中未描述
    },
    "compileType": "miniprogram",  //编译类型，miniprogram为普通小程序项目
    "libVersion": "2.3.0",  //基础库版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //项目名字，只在新建项目时读取,urlDecode解码(路径解码)
    "debugOptions": {
        "hidedInDevtools": []  //配置调试时于调试器 Sources 面板隐藏源代码的hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定义预处理的命令 beforeCompile编译前预处理命令、beforePreview预览前预处理命令、beforeUpload上传前预处理命令
    "condition": {  //编译模式，增加编译模式时，会添加到下面的对应数组
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小游戏
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}

app.json:详细见文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

{
  "pages":[//除了整体的配置文件有page选项，其他没有
    "pages/index/index",//第一项必须是小程序的启动页（初始页）
    "pages/logs/logs"//小程序新增和删除页面都需要重新配置
  ],
  "window":{
    "navigationBarBackgroundColor": "#fff",//导航栏(显示时间、电量)的背景颜色
    "navigationBarTextStyle": "black",//导航栏的字体颜色，只支持（white/black）
    "navigationBarTitleText": "WeChat",//导航栏标题文字内容
    "backgroundColor": "pink",
    "backgroundTextStyle": "light",//下拉背景字体，loading样式仅支持（dark/lignt）
    "enablePullDownRefresh": false
  },
  "networkTimepout":{
  },
  "debug":false
}

5.2、项目注册于开发流程

1、注册小程序：小程序的入口是app.js，是用来注册小程序的，执行App方法就可以注册当前开发的小程序，App() 必须在 app.js 中调用，必须调用且只能调用一次。App接受一个对象参数。
参数说明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App({//小程序的生命周期
  onLaunch(options) {//小程序初始化完成时触发，全局只触发一次。
    // Do something initial when launch.
  },
  onShow(options) {//小程序启动，或从后台进入前台显示时触发。
    // Do something when show.
  },
  onHide() {//小程序从前台进入后台时触发。
    // Do something when hide.
  },
  onError(msg) {//小程序发生脚本错误或 API 调用报错时触发。
    console.log(msg)
  },
  globalData: 'I am global data'//全局变量或函数
})

2、注册页面（page）：每个页面需要先在app.json的page当中注册，然后在相应的js文件启动，执行Page方法。
Page函数接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
参数说明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

Page({
  data: {//挂载在该页面的数据
    text: 'This is page data.'
  },//该页面的生命周期
  onLoad(options) {//页面初始化加载
    // Do some initialize when page load.
  },
  onReady() {//页面初次渲染完成
    // Do something when page ready.
  },
  onShow() {//页面显示
    // Do something when page show.
  },
  onHide() {//页面隐藏
    // Do something when page hide.
  },
  onUnload() {//页面卸载
    // Do something when page close.
  },
  onPullDownRefresh() {//监听用户下拉动作
    // Do something when pull down.
  },
  onReachBottom() {//页面上拉触底事件的处理函数
    // Do something when page reach bottom.
  },
  onShareAppMessage() {//用户点击右上角转发
    // return custom share data when user share.
  },
  onPageScroll() {//页面滚动触发事件的处理函数
    // Do something when page scroll
  },
  onResize() {//页面尺寸改变时触发(横屏竖屏切换)
    // Do something when page resize
  },
  customData: {//任意数据或函数
    hi: 'MINA'
  }
})

6、微信小程序的预览、上传、审核、发布

 

6.1、项目用微信预览

小程序的管理员或开发者可以点击微信开发工具的预览功能进行预览，分为扫描二维码预览和自动预览

6.2、项目的上传、审核、发布

点击右侧上传，填写版本号还上传描述，上传进微信公众平台中。然后在平台选审核，同时添加小程序头像等，最后发布就可以了。