1-微信小程序开发步骤

一、申请账号

mp.weixin.qq.com/wxopen/ware…1、登录账号 —》菜单 —》设置 —》开发设置 —》AppID(小程序ID)2、设置AppSecret(小程序密匙)，服务器域名

二、安装开发工具

developers.weixin.qq.com/miniprogram…打开开发工具 —》微信扫描登录 —》开始准备小程序项目

三、创建小程序项目

创建项目 —》选择代码存放路径 —》填写AppID —》编写第一个小程序项目

四、编译预览

微信开发工具 —》工具栏 —》编译或预览按钮 —》微信扫描登录 —》运行查看小程序项目

五、项目结构文件组成

1、目录、Page、Components、.js文件(.json 后缀的 JSON 配置文件)、.wxml文件(.wxml 后缀的 WXML 模板文件)、.wxss文件(.wxss 后缀的 WXSS 样式文件)、.wxs文件(.js 后缀的 JS 脚本逻辑文件)等。

2、JSON配置： 小程序配置app.jsonapp.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}}pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。 工程配置projct.config.app.json针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。 页面配置page.jsonpages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

3、WXML配置：HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

标签名字有点不一样 往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。 从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能。多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

4、WXSS样式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。此外 WXSS 仅支持部分 CSS 选择器。

5、JS交互逻辑：一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。比如：点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作{{ msg }}点击我Page({clickMe: function() {this.setData({ msg: "Hello World" })}})小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

六、小程序运行机制1、小程序的启动：微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。微信客户端通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径。{"pages":["pages/index/index","pages/logs/logs"]}微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行。且整个小程序只有一个 App 实例，是全部页面共享的。App({onLaunch: function () {// 小程序启动之后 触发}})

2、程序与页面：微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。微信客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后微信客户端会装载 logs.js文件。Page({data: { // 参与页面渲染的数据logs: []},onLoad: function () {// 页面渲染后 执行}

3、组件：小程序提供了丰富的基础组件，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。比如：

4、API：为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。比如：获取用户的地理位置wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 经度var longitude = res.longitude // 纬度}})

六、发布小程序

1、用户身份设置：管理员可在小程序管理后台统一管理项目成员（包括开发者、体验者及其他成员）、设置项目成员的权限，包括：开发者/体验者权限、登录小程序管理后台、查看小程序数据分析、开发管理、开发设置，暂停服务、解除关联公众号，腾讯云管理，小程序插件等。2、预览：使用开发工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。3、上传代码：上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注。4、小程序版本：开发版本(开发版本可删除，不影响线上版本和审核中版本的代码。)审核版本(有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。)线上版本(线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。)

七、上线小程序

1、提交审核：为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。注意开发者需要严格测试了版本之后，再提交审核， 过多的审核不通过，可能会影响后续的时间。2、发布：审核通过之后，管理员的微信中会收到小程序通过审核的通知。3、运营数据：方法一：登录小程序管理后台数据分析，点击相应的tab可以看到相关的数据。方法二：使用小程序数据助手，在微信中方便的查看运营数据。