了解小程序

本是古典何须时尚 2022-12-11 12:27 99阅读 0赞

[分享我在 简书的文章，欢迎点赞][Link 1]

欢迎关注

# 了解小程序 #

## 1.什么是小程序 ##

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

2016年9月21日发布的小程序内测版。2017年1月9日正式上线。[小程序基础库更新日志][Link 3]

## 2.小程序开发工具 ##

[工具下载][Link 4]

创建工程时需要AppID，所以我们需要先注册账号。

### 2-1.接入流程 ###

1.  [小程序注册][Link 5] — 在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
2.  小程序信息完善 — 填写小程序基本信息，包括名称、头像、介绍及服务范围等。
3.  开发小程序 — 完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
4.  提交审核和发布 — 完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

### 2-2.AppID ###

[AppID][] — 开发 --》开发设置

[添加项目成员][Link 6] — 管理 --》 成员管理

### 2-3.介绍开发工具 ###

[开发工具][Link 7]

## 3.小程序结构 ##

小程序开发工具目前提供了 5 种文件的编辑：`wxml`、`wxss`、`js`、`json`、`wxs` 以及图片文件的预览。

### 3-1.新建页面代码 ###

[文件操作][Link 8] ，有两种方式：

1.  在目录树上右键，选择新建 Page，将自动生成页面所需要的 `wxml`、`wxss`、`js`、`json`。
2.  在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件。

### 3-2.配置 ###

JSON文件都是被包裹在一个大括号中 \{\}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中。

**注意：json文件中，不能写注释。**

*  [project.config.json][] — 项目配置文件。
    
     *  通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
     *  考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 `project.config.json`，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
 *  [sitemap配置][sitemap] — 小程序内搜索，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
 *  [app.json][] — 全局配置。
 *  [页面配置][Link 9] — 每一个小程序页面的配置，只能配置window属性。

### 3-3.WXML ###

WXML（WeiXin Markup Language）是框架设计的一套标签语言。类似安卓布局文件。

### 3-4.WXSS ###

[WXSS][] (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。类似安卓 style。

### 3-5.JS ###

相当于安卓中java，执行生命周期函数以及处理逻辑。

### 3-6.wxs ###

[WXS][]（WeiXin Script）是小程序的一套脚本语言，结合 `WXML`，可以构建出页面的结构。

## 4.最简小程序 ##

// app.json
    { 
      "pages": [
        "home"
      ]
    }

<view>Hello World</view>

// home.js
    Page({ 
      
    })

[Link 1]: https://www.jianshu.com/p/73bcf6962fa0
[Link 2]: https://mp.weixin.qq.com/cgi-bin/wx
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/release/
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[Link 5]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[AppID]: https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=552473660&lang=zh_CN
[Link 6]: https://mp.weixin.qq.com/wxamp/user/manage?action=index&use_role=1&token=552473660&lang=zh_CN
[Link 7]: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
[Link 8]: https://developers.weixin.qq.com/miniprogram/dev/devtools/edit.html#%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F
[project.config.json]: https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
[sitemap]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
[app.json]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[Link 9]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[WXSS]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[WXS]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/