首页/课程/北京石油化工学院课程/小程序入门

小程序入门

教学目标及方法

了解小程序结构，创建小程序

主要内容

申请账号

1.在浏览器网址栏里输入https://mp.weixin.qq.com/wxopen/waregister?action=step1网址，根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

2.打开https://mp.weixin.qq.com/网址并登陆账号，在菜单“设置”-“开发设置”看到小程序的 AppID 了（图中用红色方块盖住的部分就为你个人的App ID了）

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID。

安装开发工具

下载软件：软件下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18112821

请根据自己的电脑下载相应的版本并进行安装。（后续课程里我们统一用V1.02.1906141版本）

快速体验

1.打开软件，用微信扫码登录开发者工具，界面如图。

2.点击“小程序”，选择项目目录、填写自己的App ID和项目名称，并勾选“建立普通快速启动模板”后，点击确定按钮。

3.点击IDE工具上的“编译”按钮，可以在工具的左侧模拟器界面看到这个小程序的表现。

也可以点击“预览”按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

代码构成

在上一小节中，我们通过开发者工具快速创建了一个 Lesson-01 项目。你可以留意到这个项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

接下来我们分别看看这4种文件的作用。

JSON 配置

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

小程序配置 app.json

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

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

代码中包含两个字段：pages字段和window字段。

pages字段：用于描述当前小程序所有页面路径，用以指定小程序页面定义在哪个目录。

window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等。

工具配置project.config.json

project.config.json会记录开发者在工具上做的任何配置，如界面颜色、编译配置等等，假若开发人员重新安装工具或者换电脑工作，只需要载入同一个项目的代码包，开发者工具就自动会应用project.config.json的配置，省去不必要的配置工具的时间。

此文档不需要开发者自己去编写。

页面配置 page.json

这里的 page.json 其实用来表示pages/logs目录下的 logs.json 和pages/index 目录下的 index.json这类和小程序页面相关的配置文件。

page.json是用来配置相应的页面不同于app.json内配置的界面表现形式的配置文件。比如：小程序的整体风格是蓝色调，就可以在 app.json 里边声明顶部颜色是蓝色即可。可小程序的所有页面不一定都是蓝色调的，对于非蓝色调的页面可以在 page.json独立配置。

WXML 模板

WXML 是用来描述当前这个页面的结构，有标签、属性等等构成。WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。具体的能力：数据绑定、列表渲染、条件渲染、模板、事件、引用。

打开 pages/index/index.wxml，你会看到以下的内容:

<!--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>

WXSS 样式

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定WXML 的组件应该怎么显示。

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

WXSS与WXML之间是通过class="usermotto"中的指定的usermotto标识符来实现的一一对应的。

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 JS 脚本文件来处理用户的交互操作。

例如：点击按钮时，把界面上 msg 显示成 "Hello World"。

WXML文件中，在 button 上声明button的bindtap 属性。

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

在 JS 文件里声明了 clickMe 方法来响应这次点击操作：

  clickMe: function () {
    this.setData({ msg: "Hello World" })
  },

此外还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调用微信提供的能力，例如获取用户信息、本地存储、微信支付等。在Lesson-01项目的例子中，在 pages/index/index.js 就调用了wx.getUserInfo获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。

小程序的启动

1、微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

2、紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

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

这个配置说明在项目中定义了两个页面为pages/index/index 和 pages/logs/logs。写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

3、微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

4、小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

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

更改小程序

navigationBar：导航栏

更改导航栏

设置小程序的状态栏、导航栏、标题、窗口背景色。

在app.json里更改导航栏背景颜色、标题文字内容及文字颜色。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "wasdylb",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

navigationBarBackgroundColor：导航栏背景颜色

navigationBarTitleText：导航栏标题文件内容

navigationBarTextStyle：导航栏标题文字颜色

更改页面内容

一个页面至少包含3个文件，分别是WXML模板文件、WXSS样式文件和JS逻辑文件。如需要修改文字内容要在WXML文件中修改；修改文字颜色显示位置等要在WXSS文件中修改；需改页面交互操作要在JS文件中修改。

1、改文字内容

在项目中图片下的文本是通过网络获取的微信头像和名字，如要修改名字要在wxml文件里面寻找对应的修改点。如将名字改成welcome。

改为：

<text class="userinfo-nickname">welcome</text>

可以看到结果：

2、改文字颜色

如果需要改变文字颜色则需要在wxss里面找到对应的修改点。在WXML文件里文字样式标识指定了userinfo-nickname，在WXSS样式文件中找到.userinfo-nickname开头的字段就是文字对应的样式设定地，改成你喜欢的颜色。

.userinfo-nickname {
  color: #2db6ae;
}

更改逻辑

小程序点击图片就能跳转logs界面，是因为在js逻辑文件有监测图片点击事件。

  //事件处理函数
  bindViewTap: function() {//点击图片后，跳转到logs页面
    wx.navigateTo({ //跳转页面函数
      url: '../logs/logs'//页面的地址
    })
  },

可在对应的wxml文件中找到image组件绑定了bindtap事件。

bindtap事件即当用户点击该组件时，会在该页面对应的js文件中的Page中找到相应的事件处理函数。

如想点击Hello World文字时也想跳转页面，就要在Hello World的text组件中指定bindtap的标识。

  <view class="usermotto">
    <text bindtap="bindViewTap" class="user-motto">{{motto}}</text>
  </view>

拓展

将logs页面改成另外一个你喜欢的页面。

END

所需硬件

暂无数据！

代码展示

暂无数据！

附件下载

资料展示
Satrt.zip

授课教师

杨立斌
美科

问答专区

暂无数据！

杨立斌高级工程师

解惑

课时信息

创建时间:2017/12/22

课程表

佳作推荐

课程推荐