微信小程序开发快速上手——工程创建与构成

综述

前面我们先容了微信小法式的简介与开辟预备工作，本文我们首要先容若何建立一个小法式以及一个小法式工程的根基结构（开辟工具版本：1.05.2204250 | 1.06.2204250）。
建立小法式工程

• 翻开微信开辟者工具
  
• 点击左上角的项目->新建项目
  
• 挑选代码寄存的硬盘途径，填入刚刚申请到的小法式的AppID，给你的项目起一个名字，勾选 “不利用云办事”（留意：你要挑选一个空的目录才可以建立项目），点击新建，你就获得了你的第一个小法式了。
  

建立小法式



小法式开辟界面

小法式编译预览

微信小法式开辟经过工具停止编译与预览很是方便，只需点击工具上的编译按钮，便可以在工具的左侧模拟器界面看到这个小法式的表示了，固然也可以点击预览按钮，经过微信的扫一扫在手机上体验你的第一个小法式。



小法式编译预览

小法式代码组成

经过上面建立的小法式工程，我们可以经过工具左侧的工程目录看到工程的目录结构



目录结构

小法式包括一个描写整体法式的 app 和多个描写各自页面的page。一个小法式主体部分由三个文件组成，必须放在项目标根目录，以下：

文件	必须	感化
app.ts	是	小法式逻辑
app.json	是	小法式公共设置
app.wxss	否	小法式公共款式表

一个小法式页面由四个文件组成，别离是：

文件范例	必须	感化
ts	是	页面逻辑
wxml	是	页面结构
json	否	页面设置
wxss	否	页面款式表

留意：为了方便开辟者削减设置项，描写页面的四个文件必须具有不异的途径与文件名。
小法式设置

全局设置

小法式根目录下的 app.json 文件用来对微信小法式停止全局设置，决议页面文件的途径、窗口表示、设备收集超不时候、设备多 tab 等。完整设置项说明请参考小法式全局设置
以下是本例小法式设置选项的app.json ：

1. {
2.   "pages": [
3.     "pages/index/index",
4.     "pages/logs/logs"
5.   ],
6.   "window": {
7.     "backgroundTextStyle": "light",
8.     "navigationBarBackgroundColor": "#fff",
9.     "navigationBarTitleText": "Weixin",
10.     "navigationBarTextStyle": "black"
11.   },
12.   "style": "v2",
13.   "sitemapLocation": "sitemap.json"
14. }

复制代码

首要字段寄义：

• pages字段——用于描写当前小法式一切页面途径，这是为了让微信客户端晓得当前你的小法式页面界说在哪个目录。
  
• window字段——界说小法式一切页面的顶部布景色彩，笔墨色彩界说等。
  

页面设置

每一个小法式页面也可以利用同名 .json 文件来对本页面的窗口表示停止设置，页面中设置项会覆盖 app.json的window中不异的设置项。
完整设置项说明请参考小法式页面设置
示例：

1. {
2.   "navigationBarBackgroundColor": "#ffffff",
3.   "navigationBarTextStyle": "black",
4.   "navigationBarTitleText": "微信接口功用演示",
5.   "backgroundColor": "#eeeeee",
6.   "backgroundTextStyle": "light"
7. }

复制代码

sitemap设置

小法式根目录下的 sitemap.json 文件用来设置小法式及其页面能否答应被微信索引。
完整设置项说明请参考小法式sitemap设置
示例：

1. {
2.   "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
3.   "rules": [{
4.   "action": "allow",
5.   "page": "*"
6.   }]
7. }

复制代码

项目设置project.config.json

• 项目根目录中的project.config.json和project.private.config.json文件可以对项目停止设置
  
• project.private.config.json中的不异设备优先级高于 project.config.json
  
• 可以在 project.config.json文件中设置公共的设置，在project.private.config.json设置小我的设置，可以将 project.private.config.json写到.gitignore避免版本治理的抵触
  
• project.private.config.json中有的字段，开辟者工具内的设备点窜会优先覆盖project.private.config.json 的内容。如在 project.private.config.json有appid字段，那末在 详情 - 根基信息中点窜了appid，会写到 project.private.config.json中，不会覆盖掉project.config.json的appid字段的内容
  
• 开辟阶段相关的设备点窜优先同步到 project.private.config.json 中，与终极编译产物有关的设备没法在 project.private.config.json 中生效
  其他设置项细节可以参考项目设置文件
  示例：
  

1. {
2.   "description": "项目设置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
3.   "packOptions": {
4.     "ignore": [],
5.     "include": []
6.   },
7.   "miniprogramRoot": "miniprogram/",
8.   "compileType": "miniprogram",
9.   "projectname": "ts-demo",
10.   "setting": {
11.     "useCompilerPlugins": [
12.       "typescript"
13.     ],
14.     "urlCheck": true,
15.     "coverView": true,
16.     "es6": true,
17.     "postcss": true,
18.     "lazyloadPlaceholderEnable": false,
19.     "preloadBackgroundData": false,
20.     "minified": true,
21.     "autoAudits": false,
22.     "uglifyFileName": false,
23.     "uploadWithSourceMap": true,
24.     "enhance": true,
25.     "useMultiFrameRuntime": true,
26.     "showShadowRootInWxmlPanel": true,
27.     "packNpmManually": false,
28.     "packNpmRelationList": [],
29.     "minifyWXSS": true,
30.     "useStaticServer": true,
31.     "showES6CompileOption": false,
32.     "checkInvalidKey": true,
33.     "babelSetting": {
34.       "ignore": [],
35.       "disablePlugins": [],
36.       "outputPath": ""
37.     },
38.     "disableUseStrict": false,
39.     "minifyWXML": true
40.   },
41.   "simulatorType": "wechat",
42.   "simulatorPluginLibVersion": {},
43.   "condition": {},
44.   "srcMiniprogramRoot": "miniprogram/",
45.   "appid": "********",
46.   "libVersion": "2.24.3",
47.   "editorSetting": {
48.     "tabIndent": "insertSpaces",
49.     "tabSize": 2
50.   }
51. }

复制代码

JSON语法

这里说一下小法式里JSON设置的一些留意事项。
JSON文件都是被包裹在一个大括号中 {}，经过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在理论中，编写 JSON 的时辰，忘了给 Key 值加双引号大概是把双引号写成单引号是常见毛病。JSON的值只能是以下几种数据格式，其他任何格式城市触发报错，例如JavaScript中的undefined。

• 数字：包括浮点数和整数
  
• 字符串：需要包裹在双引号中
  
• Bool值：true 大概 false
  
• 数组：需要包裹在方括号中 []
  
• 工具：需要包裹在大括号中 {}
  
• Null
  还需要留意的是 JSON 文件中没法利用正文，试图增加正文将会激发报错。
  

WXML模板

处置过网页编程的人晓得，网页编程采用的是HTML + CSS + JS这样的组合，其中HTML是用来描写当前这个页面的结构，CSS用来描写页面的样子，JS凡是是用来处置这个页面和用户的交互。一样事理，在小法式中也有一样的脚色，其中 WXML 充任的就是类似 HTML 的脚色。 翻开pages/index/index.wxml ，会看到以下的内容:

1. <!--index.wxml-->
2. <view class="container">
3.   <view class="userinfo">
4.     <block wx:if="{{canIUseopenData}}">
5.       <view class="userinfo-avatar" bindtap="bindViewTap">
6.         <open-data type="userAvatarUrl"></open-data>
7.       </view>
8.       <open-data type="userNickName"></open-data>
9.     </block>
10.     <block wx:elif="{{!hasUserInfo}}">
11.       <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获得头像昵称 </button>
12.       <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获得头像昵称 </button>
13.       <view wx:else> 请利用1.4.4及以上版本根本库 </view>
14.     </block>
15.     <block wx:else>
16.       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
17.       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
18.     </block>
19.   </view>
20.   <view class="usermotto">
21.     <text class="user-motto">{{motto}}</text>
22.   </view>
23. </view>

复制代码

和HTML 很是类似，WXML 由标签、属性等等组成。可是也有很多纷歧样的地方：

• 标签名字有点纷歧样
  常常写HTML的时辰，经常会用到的标签是div , p , span ，开辟者在写一个页面的时辰可以按照这些根本的标签组合出纷歧样的组件，例如日历、弹窗等等。换个思绪，既然大师都需要这些组件，为什么我们不能把这些常用的组件包装起来，大猛进步我们的开辟效力。从上边的例子可以看到， 小法式的WXML 用的标签是 view , button , text 等等， 这些标签就是小法式给开辟者包装好的根基才能， 我们还供给了舆图、 视频、 音频等等组件才能。更多具体的组件报告参考下个章节 小法式的才能
  
• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
  在网页的一般开辟流程中，我们凡是会经过JS操纵 DOM (对应HTML的描写发生的树)， 以引发界面的一些变化响利用户的行为。例如，用户点击某个按钮的时辰，JS会记录一些状态到 JS 变量里边，同时经过 DOM API 操控 DOM 的属性大概行为， 进而引发界面一些变化。 当项目越来越大的时辰， 你的代码会充溢着很是多的界面交互逻辑和法式的各类状态变量，明显这不是一个很好的开辟形式， 是以就有了MVVM 的开辟形式（例如 React, Vue），提倡把衬着和逻辑分手。简单来说就是不要再让 JS 间接操控DOM ，JS只需要治理状态即可，然后再经过一种模板语法来描写状态和界面结构的关系即可。小法式的框架也是用到了这个思绪，假如你需要把一个Hello World的字符串显现在界面上。
  WXML 是这么写 :
  

1. <text>{{msg}}</text>

复制代码

TS只需要治理状态即可:

1. this.setData({ msg: "Hello World" })

复制代码

经过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅经过数据绑定还不够完整的描写状态和界面的关系，还需要 if / else , for 等控制才能，在小法式里边，这些控制才能都用 wx: 开首的属性来表达。更具体的文档可以参考WXML
WXSS款式

WXSS具有CSS大部分的特征，小法式在WXSS也做了一些扩大和点窜。

• 新增了尺寸单元。在写 CSS 款式时，开辟者需要斟酌得手机装备的屏幕会有分歧的宽度和装备像素比，采用一些技能来换算一些像素单元。 WXSS 在底层支持新的尺寸单元 rpx ，开辟者可免得除换算的懊恼，只要交给小法式底层来换算即可，由于换算采用的浮点数运算，所以运算成果会和预期成果有一点点误差
  
• 供给了全局的款式和部分款式。 和前边 app.json , page.json 的概念不异， 你可以写一个 app.wxss
  作为全局款式， 会感化于当前小法式的一切页面， 部分页面款式 page.wxss 仅对当前页面熟效。
  
• 此外 WXSS 仅支持部分 CSS 挑选器
  更具体的文档可以参考WXSS
  

TS逻辑交互

一个办事仅仅只要界面展现是不够的，还需要和用户做交互：响利用户的点击、获得用户的位置等等。 在小法式里边，我们就经过编写TS剧本文件来处置用户的操纵。

1. <view>{{ msg }}</view>
2. <button bindtap="clickMe">点击我</button>

复制代码

点击button按钮的时辰，我们希望把界面上msg显现成 "Hello World" ，因而我们在 button 上声明一个属性: bindtap，在 TS 文件里边声了然clickMe方式来响应此次点击操纵：

1. Page({
2.     clickMe: function() {
3.         this.setData({ msg: "Hello World" })
4.     }
5. })

复制代码

响利用户的操纵就是这么简单， 更具体的事务可以参考文档 WXML-事务。
此外你还可以在TS中挪用小法式供给的丰富的 API，操纵这些 API 可以很方便的调起微信供给的才能，例如获得用户信息、当地存储、微信付出等。在前边建立的例子中，在pages/index/index.ts 就挪用了wx.getUserInfo获得微信誉户的头像和昵称，最初经过setData把获得到的信息显现到界面上。更多 API可以参考文档 小法式的API 。

至此我们对小法式的开辟流程和代码结构有了一个较为系统的领会，前面即可以按照营业需要停止现实的开辟工作了。