【微信小程序 | 实战开发】配置开发环境、生产环境和API

配置开发环境、生产环境和API的使用

写在前面：

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

如下表：

运行环境 逻辑层 渲染层

iOS JavaScriptCore WKWebView

安卓 V8 chromium定制内核

小程序开发者工具 NWJS Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

话不多说，今天就详细讲一下配置开发环境、生产环境~

一、配置开发环境

对于小程序申请注册还不了解的小伙伴可以看看往期文章，传送门：微信小程序申请注册

首先我们先了解一下微信开发者工具的界面功能

1.1 项目目录：

pages 所有的页面

index 每一个文件夹代表着一个页面,每个页面由四个文件组成

index.js 页面的js文件

index.json 页面的配置文件

index.wxml 页面的html文件

index.wxss 页面的css文件

utils 写公共方法的，也可以不用

app.js 小程序的项目的js,全局只有一个,全局的js文件，小程序的入口

app.json 小程序的全局配置文件

app.wxss 小程序的全局css文件

project.config.json 这个是项目配置文件，一般不动它

sitemap.json 这个是小程序的seo文件

小程序文件结构和传统web对比

结构 传统web 微信小程序

结构 HTML WXML

样式 CSS WXSS

逻辑 Javascript Javascript

配置 无 JSON

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json

1.2 JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序全配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  #pages添加页面路由的，添加一个路由，就是添加一个页面，谁的路径在第一个谁就是首页
  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs" 
  ],
 # "window":主要是配置下拉刷新和头部，以navigation开头的设置是头部，如果要下拉的出来，必须enablePullDownRefresh把这个配置设置成true
  "window": {
    "backgroundTextStyle": "dark",  # 下拉刷新的三个点(light/dark)
    "enablePullDownRefresh": true,  
    "navigationBarBackgroundColor": "#333",  # 头部背景颜色
    "navigationBarTitleText": "python13期",  # 头部文字
    "navigationBarTextStyle": "white"   # 文字颜色（black/white）
  },
# tabBar ：主要是配置页面下部的导航。显示顺序是和list里面的顺序一致，list里面最少两项，最多5项。
# 如果页面不在tabBar的list里面，就不会出现导航
  "tabBar": {
    "color": "#ffffff",   # 导航字体颜色
    "selectedColor": "#FFB6C1",  ￥# 导航字体被点击后的颜色
    "backgroundColor": "#333",  # 导航栏背景颜色
    "borderStyle": "white",   # 边框颜色
    "list": [{
      "pagePath": "pages/index/index",  # 导航路径
      "text": "index页面",   # 导航页说明
      "iconPath": "images/icon-2.png",    # 导航图路径
      "selectedIconPath": "images/icon-2-sed.png"   # 导航后图片路径
    },
    {
      "pagePath": "pages/test/test",
      "text": "test页面",
      "iconPath": "images/icon1.png",
      "selectedIconPath": "images/icon1-sed.png" 
    }
   ]
  },
}