小程序的安装，环境搭建以及项目目录

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序的安装，环境搭建以及项目目录

前言

本章介绍小程序的安装、环境搭建以及项目目录。

1. 微信小程序简介 1. 微信小程序

小程序，英文也称为Mini，是一种无需下载安装的应用程序。 它实现了应用程序“触手可及”的梦想，用户可以通过扫描或搜索来打开它们。 应用具有以下优点：

微信拥有大量用户，粘性非常高。 在微信上开发产品更容易触达用户； 推广应用或公众号的成本太高。 开发和适应成本较低。 很容易进行小规模试错，然后快速迭代。 跨平台。 2、运行环境

小程序的托管环境：我们把微信客户端给小程序提供的环境称为托管环境。 借助宿主环境提供的能力，小程序可以完成许多普通网页无法完成的功能。 小程序的运行环境分为渲染层和逻辑层。 WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面进行渲染； 逻辑层使用线程来运行JS脚本。 一个小程序有多个接口，因此渲染层有多个线程。 这两个线程之间的通信会通过微信客户端（以下也用来指微信客户端）进行中继，逻辑层也会通过发送网络请求，小程序的通信模型如下图所示。

3.环境准备

具体步骤参考：

微信小程序开发文档：

1）申请账户

进入小程序注册页面，按照指引填写信息并提交相应材料，即可拥有自己的小程序账号。 注册成功后即可登录并获取APPID。 无需注册也可以使用测试账号，但后续要使用微信小程序接口、支付等功能，需要获取开发小程序中的APPID才能登录。

2）安装开发工具

进入开发工具下载页面，根据您的操作系统下载对应的安装包并安装。

3）新项目

然后填写项目信息

新建项目，选择小程序项目，选择存放代码的硬盘路径，填写刚刚申请的小程序的AppID，给项目起个名字，勾选“不使用云服务” 》（注意：你需要选择一个空的目录来创建项目），点击新建，你将得到你的**小程序。 单击顶部菜单上的“编译”即可在微信开发工具中预览您的**小程序。

打开编译器，可以看到微信开发工具的工作界面如下：

二、项目目录结构 1、小程序项目结构与传统Web对比

小程序框架提供了自己的视图层描述语言WXML和WXSS，以及视图层和逻辑层之间的数据传输和事件系统，让开发可以专注于数据和逻辑。

从上面的比较可以看出，传统的Web具有三层结构。 微信小程序有四层结构，另外一层是.json配置文件。

2、小程序基本目录结构

项目中会生成不同类型的文件：

2.1.json配置文件

小程序的全局配置app.json包括小程序的所有页面路径、界面性能、网络超时、底部标签等：

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle" : "light",
"navigationBarBackgroundColor" :  "#fff",
"navigationBarTitleText" :  "WeChat",
"navigationBarTextStyle" : "black"
}
}

字段含义：

pages字段用于描述当前小程序所有页面的路径。 这是为了让微信客户端知道你的小程序页面当前定义在哪个目录下。 字段定义包括小程序所有页面的顶部背景颜色、文字颜色定义等。完整的配置信息请参考app.json配置

工具配置..json，开发项目时的个性化配置，其中会包括编辑器颜色、上传代码时自动压缩等一系列选项。

页面配置page.json可以让开发独立定义每个页面的一些属性，比如刚才提到的顶部颜色、是否允许下拉刷新等。

.json用于配置小程序及其页面是否允许被微信索引。

在介绍小程序基本语法之前，我们需要简单了解一下：

从事过Web编程的人都知道，Web编程使用的是HTML+CSS+JS的组合。 HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于对页面进行处理。 与用户的互动。 其中，WXML起到了与HTML类似的作用。 WXSS 是 CSS。 JS 仍然处理逻辑。

小程序的WXML中使用的标签有view、text等小程序的安装，环境搭建以及项目目录，这些标签是小程序为开发封装的基础能力。 我们还提供地图、视频、音频等组件能力。

小程序使用的框架称为MINA。 框架的构建思路是采用MVVM开发模型（如React、Vue），提倡渲染与逻辑分离。 简单来说，JS不再需要直接控制DOM。 JS只需要管理状态，然后使用模板语法来描述状态和界面结构之间的关系。

2.1 模板语法（见代码）

WXML()是框架设计的一套标签语言。 结合基本组件和事件系统，就可以构建页面的结构。

1. 数据绑定

书写方法：

<view>  {{  message  }}  </view>

Page({
data :  {
message :  'Hello  MINA!'
}
})

2. 组件属性

<view  id="item-{{id}}">  </view>

Page({
	data :  {
	   id : 0
	}
})

3.

不要直接写=”false”，计算结果是字符串

<checkbox  checked= "{{false}}">  </checkbox>

4. 操作

三元运算：

<view  hidden= "{{flag  ?  true  :  false}}">  Hidden  </view>

算术运算：

<view>  {{a  +  b}}  +  {{c}}  +  d  </view>

字符串操作：

<view>{{"hello"  +  name}}</view>

Page({
data:{
name :  'MINA'
}
})

注意：如果大括号和引号之间有空格，*终会被解析为字符串。

5. 列表渲染

item的变量名默认为item wx:for-item可以指定数组当前元素的变量名

下标变量名默认为索引 wx:for-index 可以指定数组当前下标的变量名

wx :key 用于提高数组渲染的性能。 wx :key 绑定的值有以下选项：

1）Type，代表循环项中唯一的属性

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key= "id"

2) 保留字*这表示项目本身。 *这必须表示唯一的字符串和数组。

完整的使用代码如下：

list:[1,2,3,4,5]
wx:key= "*this"

完整的使用代码如下：

<view  wx:for= "{{array}}"  wx:key= "id">
{{index}}:  {{item.message}}
</view>

Page({
data :  {
array :  [{
id :0,
message :  'foo',
},  {
id :1,
message :  'bar'
}]
}
})

6. 块

渲染包含多个节点的结构块*终不会成为真正的 DOM 元素。

<block  wx:for= "{{[1,  2,  3]}}"  wx:key= "*this"  >
<view>  {{index}}:  </view>
<view>  {{item}}  </view>
</block>

这里展开一下，什么是DOM？

DOM 是浏览器在加载网页时创建的文档对象模型（模型）。 浏览器收到代码后对其进行解析，经过DOM构建、布局和页面绘制三个主要步骤开发微信端小程序，*终将其显示为每个人都能理解的网页。

浏览器首先通过HTML解析器解析接收到的HTML代码，并将其构造成DOM树。 DOM树就像一棵倒挂生长的大树。 这个对象模型决定了节点之间存在一定的关系。 他们的关系可能是父亲、儿子或兄弟。 我们可以沿着这棵树做很多操作。 然后，利用接收到的css代码，通过css解析器构造样式表规则，并将这些规则放置到对应的DOM树节点上，得到带有样式属性的DOM树。

浏览器按照从上到下、从左到右的顺序读取DOM树的文档节点，并依次存储在虚拟传送带上。 传送带上的箱子就是节点，这条流动的传送带就是文档流。 文档流布置完毕后，获取计算出的节点的坐标、大小等CSS属性，然后将节点一一放置，从而在页面上对节点进行布局。

布局完成后，我们实际上在页面上看不到任何内容。 浏览器只是计算每个节点对象应该放置在页面上的位置，但没有可视化。 所以*后一步就是把所有东西都画出来，完成整个页面的渲染。

7. 条件渲染

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等