软件工程学研社学习-微信小程序（1）-微信小程序开发简介_微信小程序认知与思考软件工程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45626338/article/details/121125782

微信小程序开发简介

写的比较简单，主要是自己翻看用，该有的都有。

所需软件

微信开发者工具（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
小程序与普通网页的区别

小程序的开发语言是javascript，小程序的开发同普通的网页开发相比有较强的近似性，对于前端而言，从网页开发迁移至小程序开发的成本并不高，但两者依旧存在区别。网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
小程序的运行环境

运行环境逻辑层渲染层
iOS JavaScriptCore WKWebView
Android V8 chromium定制内核
小程序开发者工具 NWJS Chorme WebView
小程序代码构成

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
Android	V8	chromium定制内核
小程序开发者工具	NWJS	Chorme WebView

后缀名	类型
.json	JSON配置文件
.wxml	WXML模板文件
.wxss	WXSS样式文件
.js	JS脚本逻辑文件

JSON配置文件

JSON是一种数据格式，不是一种语言，在小程序中，JSON扮演的静态配置的角色。
- 小程序配置app.json
  
  该文件是，当前小程序的全局配置，包含了小程序的所有页面路径，界面表现，网络超时时间，底部tab等。下载自带的QuickStark项目中的app.json内容如下:
```
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}
```
  里面的写法将其写做各类对象
  
  内容解析：
  1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
- 工具配置priject.config.json
  
  通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
- 页面配置page.json
  
  这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
- json语法
  
  JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
  
  JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
  
  数据格式要求
  数字包含浮点数和整数
  字符串需要包裹在双引号中
  Bool值 true或false
  数组需要包含在[]
  对象需要包含在{}
  NULL NULL
  JSON中不能添加注释
WXML模板

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:
```
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
```
WXML与HTML的不同

1.标签名字有点不一样

往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。

从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

假设需要把Hello World字符串显示在页面上：

WXML这么写:
```
<text>{{msg}}</text>
```
JS只需:
```
this.setData({msg:"Hello World"})
```
WXSS样式

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

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
```
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
```
点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
```
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
```
目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件必需作用
app.js 是小程序逻辑
app.json 是小程序公共配置
app.wxss 否小程序公共样式表
一个小程序页面由四个文件组成，分别是：

文件类型必需作用
js 是页面逻辑
wxml 是页面结构
json 否页面配置
wxss 否页面样式表
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名