从零开始学微信小程序开发－－－2、小程序项目的创建、相关文件的作用及小程序IDE

最新推荐文章于 2023-07-08 17:04:25 发布

hst_gogogo

最新推荐文章于 2023-07-08 17:04:25 发布

阅读量1.9k

点赞数

分类专栏：小程序文章标签：小程序 IDE

本文链接：https://blog.csdn.net/hst_gogogo/article/details/84500735

版权

小程序专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、创建一个小程序项目

1、下载安装微信web开发者工具，目前最新版本是1.02.1811141。

2、打开，扫码登录，

3、选择小程序项目

4、点击项目管理旁边的+

5、如果你有小程序账号会有一个APPID，详情见小程序简易教程申请账号那一节，如果还没有，可以点击下方的“小程序”使用测试号，选好项目目录，输入项目名称，初学者建议勾选点击确定然后进入IDE，在项目目录下就会生成如下右图所示的文件:

二、IDE

开发微信小程序开发工具可以用小程序开发者工具，也可以用Sublime(轻便)或WebStorm(更能全而且强大)。本节介绍小程序开发者工具。

默认模拟器、编辑器和调试器都是选中状态，界面如下：

在Help中可以快速打开帮助文档

编译代码可以点击编译图标，也可以快捷键 ctrl+s

在左上方可以选择模拟的机子和网络环境等

三、相关文件及其作用：

一开始的目录结构（如果没勾选“建立普通快速启动模板”则这里是没有目录和文件的，点击上方的"+"创建）如下图所示，下面说说每个目录及文件的作用：

一个小程序其实是由描述整体的app（唯一）和描述各个页面的page（可以是多个）组成，描述整体的app放在根目录下，由三个文件组成（包括 app.js、app.json、app.wxss，其中前两者是必需有的）；小程序页面由四个文件组成（包括XXX.js、XXX.wxml、XXX.json、XXX.wxss，其中前两者必需有）注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。当描述整体的样式表和描述某个页面的样式表发生冲突时，采用就近原则---即以描述某个页面的样式表为准，这在后面会举例细说。

app.json文件用于对小程序进行整体（全局）配置，在这里配置了页面文件的路径、窗口表现、网络超时时间、多tab等信息，下表是简易教程（对每个配置项都有详细的讲解，可以点进去看一下，我再写只会更加多余）中对其配置项的列举：

app.json 配置项列表

属性	类型	必填	描述	支持版本
pages	String Array	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 `tab` 栏的表现
networkTimeout	Object	否	网络超时时间
debug	Boolean	否	是否开启 debug 模式，默认关闭
functionalPages	Boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object Array	否	分包结构配置	1.7.3
workers	String	否	`Worker` 代码放置的目录	1.9.90
requiredBackgroundModes	String Array	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	Boolean	否	iPad 小程序是否支持屏幕旋转，默认关闭	2.3.0
navigateToMiniProgramAppIdList	String Array	否	需要跳转的小程序列表，详见 wx.navigateToMiniProgram	2.4.0
usingComponents	Object	否	全局自定义组件配置，开发者工具 1.02.1810190 及以上版本支持此字段

project.config.json是小程序根目录下的一个工具配置文件，这里放的是针对开发者喜好而做的一些个性化配置，如：界面颜色、编译配置、上传代码时自动压缩等，当换一台电脑或重装工具的时候，只要载入对应小程序项目的这个这个文件，开发者工具就会自动帮我们恢复到开发这个项目时候的个性化配置。

page.json是pages/logs 目录下的 logs.json这类和小程序页面相关的页面配置文件，也就是说，我们也已在 app.json中配置整个页面的整体风格（如色调等），在page.json中配置某一个页面所特有的属性（比如，一些页面允许下拉刷新，而另一些不允许，那就要单独在page.json中配置；又如：我的整个小程序的色调都是橙色，在某一个页面我想弄成紫色，那这时候就要为这个页面单独配置了）当有页面的配置项时，就会覆盖app.json中相同的配置项，如果没有指定的配置项，则在该页面中使用app.json中的配置。

wxml模板：在网页编程中，采用的是HTML+CSS+JS的组合，HTML描述的是整个页面的骨架，CSS描述页面的外观，JS描述页面的行为（负责与用户进行交互），在小程序中，XXX.wxml就充当了HTML的角色，看下面这段代码：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

WXML代码和HTML代码都有元素（标签）、文本（标签里面的内容）、属性（如src、class、bindtap等），那么它们有什么不同之处呢？

① 标签名不一样

如<view>相当于HTML 中的<div>,<image>相当于HTML 中的<img>等，这些要靠学习和实践的过程中慢慢地积累！更多组件请参考简易教程中的小程序的能力。

②文件结构不一样

HTML文件主要由<html><head></head><body></body></html>组成，HTML的元数据、引入CSS文件或JS文件都是在<head></head>中，<body></body>中放的是文档的所有内容（比如文本、超链接、图像、表格和列表等）；而WXML中默认的根节点为<page></page>（这种说法可能不太恰当，只是我觉得方便理解，其实page是wxml的页面构造器），并且不用在WXML文件中引用CSS文件和JS文件。

③WXML中多了一些诸如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" })

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，
还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

更详细的文档可以参考 WXML

wxss样式：wxss和css非常相似，但小程序的wxss做了一些扩充和修改，并且wxss并不是支持css的所有特性的。

①新增了尺寸单位rpx，在写CSS样式的时候需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位，但如果用rpx，换算工作交给小程序底层去完成即可，它会自适应不同手机屏幕大小（换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差）

屏幕尺寸：屏幕对角线的距离；

DPI: 每英寸包含的像素点数（px）；

px指的不是物理像素，而是手机中的物理分辨率,可以理解为一个点，与长度无关，点是没有大小的；

pt逻辑分辨率（视觉上看到的），与屏幕尺寸有关，可以理解为长度单位（其实与移动设备的栅格渲染有关），1pt可以由1px构成，也可以由两个或多个px组成；

ppi(pixels per inch)所表示的是每英寸长度所能够排列的像素(pixel)的数目。因此PPI数值越高，即代表显示屏能够以更高的密度显示图像。当然，显示的密度越高，拟真度就越高。pixels per inch是图像分辨率的单位，图像ppi值越高，单位面积的像素数量就越多，所以画面的细节就越丰富。

Reader指的是每个pt中包含了多少px，如iPhone6下2个px才构成1个pt，这就是为什么模拟器下iPhone6的分辨率是375而设计图一般给750像素；

视网膜屏：分辨率超过人眼识别极限的高分辨率屏幕(单位像素密度下，像素个数达到肉眼可见的极限，再多也不会更加清晰)

视网膜(Retina)屏幕是苹果公司"发明"的一个营销术语。并在部分移动产品使用。苹果这个术语用在iphone 4手机上，自此一直沿用，它将960×640的像素压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸(ppi)，称之为"视网膜屏幕"。

rpx会自适应不同分辨率的设备

以iPhone6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
iPhone6(@2x) 下 1px = 1rpx =0.5pt //以iPhone6的尺寸---750像素的宽做效果图，如果效果图的宽为200px，那么在小程序中就应当用100px或200rpx
使用rpx时小程序会自动在不同的分辨率下进行转换，而使用px则不能；

upsampling(上采样) 图片来源：知乎

②提供了全局样式和局部样式（与app.json和page.json中的配置一个意思，不再赘述）

③只支持css的部分选择器，详见 WXSS

JS主要用于和用户进行交互（如效应用户的点击、获取用户的位置等），在小程序中也是通过编写JS脚本文件来处理用户的操作（参考 WXML - 事件）、调用API以引用微信提供的能力（本地存储、微信支付等，参考小程序的API）。

<view>{{ clk }}</view>
<button bindtap="clickMe">Please Click Me</button>

当用户点击 button 按钮的时候，我们希望把界面上 clk 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 app.js里声明 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ clk: "Hello World" })
  }
})

app.js是小程序的脚本文件，可以在这里放监听并处理小程序的声明周期函数、声明全局变量等的脚本；

index.js是页面脚本文件，在这里放监听并处理页面的生命周期、获取小程序实例、声明并处理数据、响应页面交互事件等的脚本。

（~~不过index.js和logs.js的角色区别，我还没明白，等弄明白了再回来更新吧~~）

index和logs其实是两个不同的页面，index.js和logs.js的作用其实都是一样的，这个从Quickstar项目可以看出来，当我们点击头像，就会跳转到“查看启动日志”页面，这里同样为之定义了相应的页面逻辑和样式，然后有个“返回”图标，点击返回到启动页面。同理，如果要多加一个页面，在index和logs（名字是自己定的，目录下面四个文件名字一致即可）同级目录上新建对应的目录即可。

四、小程序的启动过程（基本摘自API文档，，API文档hin重要啊！没事多翻翻）

在微信客户端打开小程序前，先把整个小程序的代码下载到本地，然后通过app.json中的pages字段（对应的是页面路径组成的数组）找到小程序中所有相关页面的路径，如下面这个配置说明在 QuickStart 项目定义了两个页面（分别为pages/index/目录下的以index为名的文件 和在pages/logs/目录下的以logs为名的文件） pages 字段的第一个页面即为小程序的首页（打开小程序首先会看到的页面），客户端把小程序首页代码装载进来后通过底层机制渲染出首页页面，

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行（整个小程序只有一个 App 实例，是全部页面共享的，参考注册程序 App ）:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

程序与页面
你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后执行
}
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

持续更新ing..

参考资料：

小程序API文档：https://developers.weixin.qq.com/miniprogram/dev/api/

360百科：https://baike.so.com/doc/955943-1010512.html

简书：https://www.jianshu.com/p/a292c6277e12

上一篇：初始小程序

下一篇：小程序静态启动页面的制作

hst_gogogo

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
从零开始学微信小程序开发－－－2、小程序项目的创建、相关文件的作用及小程序IDE

一、创建一个小程序项目1、下载安装微信web开发者工具，目前最新版本是1.02.1811141。2、打开，扫码登录，3、选择小程序项目4、点击项目管理旁边的+5、如果你有小程序账号会有一个APPID，详情见小程序简易教程申请账号那一节，如果还没有，可以点击下方的“小程序”使用测试号，选好项目目录，输入项目名称，初学者建议勾选点击确定然后进入IDE，在项目目录下就会生...
复制链接

扫一扫