官网
微信公众平台
开发工具下载
设计指南
案例demo

https://www.520mg.com/c/min.html

http://blog.poetries.top/2018/08/09/xiaochengxu-note

一、概述

1. 发展历史

微信小程序发展传送门

2. 小程序特点

• 小程序应用开发是一种混合式开发，并不是页面开发
• 不需要下载，第一次使用门槛低（小程序安装包较小，仅2-8M）
• 体验仅次于原生应用，但是比网页应用体验好
• 节省流量，节省安装时间，不占用桌面空间（也可以发布到桌面）
• 对于开发者来说极大的降低了开发成本，并且可以忽略平台差异

3. 小程序适用场景

• 是否需要紧密结合线下，如果需要，小程序非常合适（依托于微信平台用户）
• 业务逻辑是否够简单，小程序有体积限制，无法承载过于复杂的业务
• 业务逻辑是否即用即走型，小程序不占用桌面相较于移动端不利于做连续性强的业务
• 是否要借助微信用户群，如果你的业务场景和微信用户体系相抵触，你的业务更容易推广

4. 小程序开发步骤

• 申请开发者账户（APPID）
• 下载微信小程序的IDE
• 查看API文档开发小程序
• 发布上传小程序（需要等待审核）
• 审核通过查看小程序

二、开发

1. 前言

• App() 必须在 app.js 中注册，且不能注册多个。
• 编译后的代码包大小需小于 1MB，否则代码包将上传失败。
• 每个页面需要手动在app.json中进行注册，否则不能访问。
• app.json中pages数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对 pages 数组进行修改。
• 直接修改 this.data无效，无法改变页面的状态，还会造成数据不一致。
• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• tabBar只能配置最少2个、最多5个，tab 按数组的顺序排序。
• 小程序页面只能同时打开 5 个，如果交互流程较长难以支持。
• 同时只能存在 5 个url请求。
• 无法跳转小程序以外的url。
• 没有cookie。
• 没有开放加载web页面
• 没有a标签链接，不可嵌套iframe
• 没有window变量，但微信提供了wx全局方法集
• 事件绑定和条件渲染类似Vue，全部写在WXML中

2. 账户申请成功后登录，下载开发者工具IDE（根据系统下载稳定版）

image.png image.png

3. 打开开发者工具准备开发

image.png

开发目录结构

image.png
image.png

主体

由app.js、app.json、app.wxss三个文件组成，放在根目录

• app.js 根目录的app.js很有用,因为在它内部注册的变量或方法，都是可以被所有页面获取到。可以监听并处理小程序的生命周期、声明全局变量。其余的.js文 件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法
• app.json是小程序的全局配置

pages 配置小程序的组成页面，第一个代表小程序的初始页面
window 设置小程序的状态栏、标题栏、导航条、窗口背景颜色
tabBar 配置小程序tab栏的样式和对应的页面
app.wxss 是小程序的公共样式表，可以在其他.wxss文件中直接使用

全局配置 ----- > app.json

⚠️  在独立页面 xxx.json 中配置,会覆盖全局配置

全局配置文档

"pages": [ //设置页面的路径
        "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
        "pages/logs/logs"
      ],
      "window": { //设置默认窗口的表现形式
        "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
        "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
        "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
        "backgroundColor": "#eeeeee", //窗口的背景色
        "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
        "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
        "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
      },
      "tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
        "list": [{ //设置tab的属性，最少2个，最多5个
          "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
          "text": "首页", //tab 按钮上的文字
          "iconPath": "../img/a.png", //tab图片的路径
          "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }],
        "color": "red", //tab 的字体颜色
        "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
        "backgroundColor": "#2196f3", //tab 的背景色
        "borderStyle": "white", //边框的颜色 black/white
        "position": "bottom" //tab处于窗口的位置 top/bottom
        },
      "networkTimeout": { //默认都是 60000 秒一分钟
          "request": 10000, //请求网络超时时间 10000 秒
          "downloadFile": 10000， //链接服务器超时时间 10000 秒
            "uploadFile": "10000", //上传图片 10000 秒
          "downloadFile": "10000" //下载图片超时时间 10000 秒
        },

三、小程序框架（MINA）

• 底层基于react native 的一个响应式开发框架
• 组件化开发，数据驱动