WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 七月老师 的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

授权许可

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

小程序作为一个新的事物，目前网络上的学习资料并不是很全面，包括本文也是如此，并且小程序还在不停的 Update 中，也许上个版本存在的 BUG，在这个版本已经修复了，所以我建议，作为一个开发者，学习小程序最好的途径就是，阅读官方的 API 文档 微信公众平台 | 小程序

官方文档对小程序的框架、组件、API 的描述是最为准确和清晰的，并提供了详细的 Demo，并且也是建议大家，无论是学习什么语言，官方的 API 文档永远是最好的教程，要是觉得看不懂，那就多看几遍吧

关于微信小程序的几点回顾

什么是微信小程序？

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 ——张小龙

在我们的认知习惯中，手机里的应用程序作为我们社交行为的一种工具，无论是在线上还是线下，都给我们带来极大的便捷，但功能越多样的应用程序，往往在手机中所占据着大量的内存空间，并且每一次的更新升级，都会带来无比沉重的灾难

现如今的应用程序都异常强大，能社交能购物还能玩游戏，基本上把我们在手机上大部分的行为都囊括其中，将应用程序做成一个生态，用户就能在自家应用程序中停留更多的时间

但用户习惯是很难被改变的，就像是能聊天的软件有很多种，但大家最后却选择了微信

而且，并非应用程序里的所有功能我们都会使用得到，而有时候我们选择下载安装某个应用程序，只是为了使用该应用其中的某个功能

这里就需要提到很重要的一点，就是关于场景，只有在某个场景下，我可能才会使用到这个应用，比如看电影的时候，我们会选择在应用程序中进行购票，不仅实惠还特别方便，但平时如果没什么事，我相信大家是不会打开这个应用的

而小程序推崇的“随时可用，触手可及”的理念，就很适合去做这一类型的应用，业务逻辑简单、使用频率低、性能要求不高的应用，比如购票应用，叫外卖应用，天气预报类应用等等，而其他一些重量型 APP，也可以将某一部分的功能做成小程序，方便用户的使用

准备工作

获取微信小程序的 AppID

小程序刚推出时，仅仅是面向了企业主体开放了小程序的注册资格，虽然没有小程序的 AppID，个人开发者也能够体验小程序，但小程序的部分功能会受到限制

随着小程序的逐步完善，微信也是在不久前，正式宣布小程序对个人开发者开放注册，使得更多的个人开发者也能够开发小程序

在 微信公众平台 官网首页，点击右上角的“立即注册”按钮，填写邮箱（未注册过小程序及微信产品的邮箱），登录邮箱查看验证信息，并且选择账号主体类型，微信提供了 6 个账号主体类型，具体区别可参考下图

账号主体类型

注册完成之后，在网站的“设置”-“开发者设置”中，即可查看到微信小程序的 AppID

微信小程序 AppID

下载开发者工具

微信为了帮助开发者简单和高效地开发微信小程序，推出了全新的 开发者工具 ，集成了开发调试、代码编辑及程序发布等功能，需要注意的是，在启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，并且后续所有的操作都会基于该微信帐号

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目，我们在该选项打上钩，开发者工具将会帮助我们在开发目录里生成一个简单的 Demo

quick start 项目

运行结果 1

运行结果 2

从上图可以看到，在开发者工具界面的左侧导航，有七个功能选项卡，分别是编辑、调试、项目、编译、后台、缓存，关闭

“编辑”选项卡，可以查看和编辑我们的代码，“调试”选项卡，可以测试代码并模拟小程序在微信客户端的效果，具体功能参照 Chrome 开发者工具；“项目”选项卡，包括小程序的基础信息和配置信息，小程序的管理员或开发者可通过“预览”功能，在手机内预览小程序的效果

quick start目录结构

我们可以看到，根目录下有 3 个文件：app.js、app.json、app.wxss，这三个应用程序级别的文件，用来描述整个应用程序状态的，在全局中是唯一的

而 pages 文件夹下的页面都是由 4 个文件构成的，分别是：.wxml、.wxss、.js 和 .json 文件，这四个文件也是类似于前端 Web 页面中的 HTML (骨架)，CSS (样式)，JS (逻辑)，JSON (配置)

还需要大家记住的是，wxss 样式跟 json 配置有一个就近原则，如果 wxss，json 的配置冲突，那么就会以页面最近的配置为准

在该 Demo 中，我们通过 index 页面进入到了 logs 页面当中，所以 index 为一级页面，而 logs 为二级页面，小程序最多只能有五级页面

新建一个 Welcome 页面

还需要在提醒一点的是，小程序不可以使用现在已存在的 JavaScript 组件库，例如 JQuery，因为小程序不支持 DOM 操作，在小程序中没有 windows 对象，以 DOM 为操作对象的组件库都无法使用

所以 js 文件我们需要使用原生 JavaScript 进行编写，微信开发者工具也提供了 ES6 转 ES5 功能，不过该功能只会帮助开发者处理语法上的问题，新的 ES6 的 API，例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。同时，为了提高代码质量，在开启 ES6 转换功能的情况下，默认启用 JavaScript 严格模式。

现在，我们来新建一个 Welcome 页面，在微信开发工具中，点击“添加项目”，并勾选官方提供的 quick start 项目，将原有的项目文件修改成下图所示

项目文件结构

每新建一个页面，都需要在 app.json 中注册，app.json 当中的代码是一个 json 对象，该对象的第一个属性 pages 接受一个数组，数组的每一项都是一个字符串，用来指定我们的小程序将由哪些页面组成，每一项由对应页面的【路径 + 文件名】组成

{
  "pages":[
    "pages/welcome/welcome"
  ]
}

页面的添加或删除都需要在 pages 数组下面增减对应的页面路径，否则小程序会报错，还需要注意的是，页面内的 js 文件不能为空，即 welcome.js 文件中不能没有任何 JavaScript 代码，否则会出现下图所示的错误

未正确调用 Page() 的错误提示

解决办法：在 welcome.js 中主动调用一下 Page() 方法就可以了

Page({
  
})

同样的，welcome.json 文件同样不能为空，即使你目前不想在 json 文件中配置任何属性，也需要加入一个空的 {}，以保证小程序能正确执行，json 文件中无法添加注释

我们每次创建一个新页面时，都需要手动地创建一个目录 + 4 个文件，这是相当麻烦的事情，这有一个快速创建的小技巧，如果 app.json 文件下 pages 数组里的页面路径，指向的是一个不存在的文件，那么 MINA 框架会自动创建这个页面的 4 个文件，通过这样的方式新建的页面文件将自动补全每个页面文件里必须的基本代码，不会出现错误

构建 Welcome 页面的元素和样式

welcome.wxml 代码

<view class="container">
  <image class="avatar" src="/images/avatar/niangao.png"></image>
  <text class="motto">Hello，Nian糕</text> 
  <view class="journey-container" bindtap="onTap">
    <text class="journey">开起小程序之旅</text>
  </view>
</view>

运行结果

• view 组件起到的是容器及分割文档的作用，类似于 HTML 中的 div 标签
• text 组件用来显示一段文本，文本不写在 text 组件当中也可以显示，但只有被 text 组件包围起来的文字，才能在你的手机中长按选中，text 组件可以嵌套，也可以支持转义字符的解析
• image 组件用来显示一张图片，类似 HTML 中的 img 标签，同样是通过 src 属性来指向一张图片的路径，而图片在 MINA 框架的设置下，默认宽度 300 px，高度 225 px
• 我们在设置 image 组件的 src 属性时，使用的是绝对路径，它以 / 开头，/ 代表的是根目录，如果使用的是相对路径，则为 <image class="user-avatar" src="../../images/niangao.png"></image>

welcome.wxss 代码

.container{
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color:#b3d4db;
}
.avatar {
    width:200rpx;
    height:200rpx;
    margin-top: 160rpx;
}
.motto{
    margin-top:100rpx;
    font-size:32rpx;
    font-weight: bold;
}

.journey-container{
    margin-top: 200rpx;
    border: 1px solid #405f80;
    width: 200rpx;
    height: 80rpx;
    border-radius: 5px;
    text-align:center;
}

.journey{
    font-size:22rpx;
    font-weight: bold;
    line-height:80rpx;
    color: #405f80;
}

page{
    height: 100%;
    background-color:#b3d4db;
}

app.wxss 代码

text{
    font-family: MicroSoft Yahei;
    font-size: 24rpx;
    color: #666;
}

运行结果

• 小程序能够很好地支持 Flex 布局，这是官方所推荐的布局方式，关于 Flex 布局的知识要点，可参考这篇博文进行学习 CSS 布局_2 Flex弹性盒，在这里，flex-direction:column; main 轴垂直，方向自上而下，align-items: center; corss 轴上的子元素居中对齐
• 一般的视觉稿都是参照 iPhone 6 的 750 × 1334 的分辨率进行设计的，这里的分辨率指的是物理分辨率 px，而我们在模拟器当中，iPhone 6 的分辨率为 375 × 667，模拟器当中的分辨率指的是逻辑分辨率 pt，可以看到物理分辨率跟逻辑分辨率是2：1的关系，所以我们一般会把在视觉稿量出的尺寸减半，写到样式中
• 在这里我们使用的是 rpx 这个全新的单位，尽管设置width:100px;height:100px; 或者 width:200rpx;height:200rpx;，在iPhone 6 下的显示效果都是一样的，但若是在其他机型下，这两种不同单位就会出现差异，rpx 可以使组件自适应屏幕的高度和宽度，能够使页面适用不同机型、不同分辨率的手机上，但 px 不会
• 到底是选择 rpx 还是选择 px，这取决你需要元素随着移动设备尺寸的变化而变化，还是让元素始终保持不变
• 如果是静态的样式，不会被改变的，我们写到 class 中；如果是动态的样式，我们就写到 style 中
• 若是页面中使用的样式是相同的，如字体的样式，那么我们推荐将这些样式写到 app.wxss 全局样式表中，这样我们所有的页面中的字体样式都是一样的，如果不想在某个页面中使用全局默认样式，只需要在相应页面的 wxss 文件中重新定义这个样式即可，小程序会优先选择页面的 wxss 文件，而不是 app.wxss 文件
• page 容器元素是由 MINA 默认添加的，该元素代表着页面这个整体

app.json 代码

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db"
  }
}

运行结果

我们通过修改 window 配置项，达到了导航栏“隐藏”的效果，window 配置项其他属性如下：

• navigationBarTextStyle 配置导航栏文字颜色，只支持 black/white
• navigationBarTitleText 配置导航栏文字内容
• backgroundColor 配置窗口颜色
• backgroundTextStyle 下拉背景字体，仅支持 dark/light
• enablePullDownRefresh 是否开启下拉刷新

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_01 上了，有需要的同学可自行下载