从0开始，手把手教你开发并部署上线一个知识测验微信小程序

上线项目演示

微信搜索[放马来答]或扫以下二维码体验：

Hello小程序

1.注册微信小程序

点击立即注册，选择微信小程序，按照要求填写信息

2.登录小程序并完善信息

填写小程序信息，完善信息。

3.下载小程序开发工具

完善信息后点击文档，工具，下载，选择稳定版的对应平台的安装包下载，下载完后点击安装即可

4.建立小程序项目

扫码登录，选择小程序，并点击加号，填写相关信息，APPID位置于下方截图所示。

5.小程序代码结构介绍

如下图所示的四个文件，主要用于注册和配置微信小程序，其包含的是全局配置信息。

app.js:用于注册微信小程序应用。
app.json:小程序的全局配置，比如网络请求的超时时间，以及窗口的属性
app.wxss:小程序全局样式
project.config.json:包含了小程序的整体配置信息，即使是换了开发设备，亦或是换了项目，只要将该文件保留，每个开发者的个性化设置就都将保留。

如下图所示，还有两个目录，

pages：每一个子文件夹代表了小程序的一个页面，比如index，和logs分别代表了两个页面。每个页面又由四个文件组成：
index.js：处理页面逻辑和数据交互。
index.json：对应页面的配置信息。
index.wxml：展示页面的内容和元素。
index.wxss：设置用wxml展示元素的样式。
utils：存放的是一些工具代码，实现代码复用的目的。

6.小程序helloworld

开发试题分类页面

新增home页面

pages目录下新建home目录，并添加4个文件，如图所示：

其中：
home.js

// pages/home/home.js
Page({
  data: {

  },
  onLoad: function (options) {

  },
  toTestPage: function(e){
    let testId = e.currentTarget.dataset['testid'];
    wx.navigateTo({
      url: '../test/test?testId='+testId
    })
  }
})

home.wxml

<!--pages/home/home.wxml-->
<view class="page">
  <view class="page-title">请选择试题：</view>
  <view class="flex-box">
    <view class="flex-item"><view class="item bc_green" bindtap="toTestPage" data-testId="18">IT知识</view></view>
    <view class="flex-item"><view class="item bc_red" bindtap="toTestPage" data-testId="15">游戏知识</view></view>
    <view class="flex-item"><view class="item bc_yellow" bindtap="toTestPage" data-testId="21">体育知识</view></view>
    <view class="flex-item"><view class="item bc_blue" bindtap="toTestPage" data-testId="27">动物知识</view></view>
    <view class="flex-item item-last"><view class="item bc_green" bindtap="toTestPage" data-testId="0">综合知识</view></view>
  </view>
</view>

home.json

{
  "navigationBarTitleText": "试题分类",
  "usingComponents": {}
}

home.wxss

/* pages/home/home.wxss */
.page-title {
  padding-top: 20rpx;
  padding-left: 40rpx;
  font-size: 16px;
}
.flex-box {
  display: flex;
  align-items:center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing:border-box;
}
.flex-item {
  width: 50%;
  height: 200rpx;
  padding: 20rpx;
  box-sizing:border-box;
}
.item {
  width:100%;
  height:100%;
  border-radius:8rpx;
  display: flex;
  align-items:center;
  justify-content: center;
  color: #fff;
}
.item-last {
  flex: 1;
}

修改app.json，注意：pages/home/home一定要放到pages数组的最前，以成为首页。

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

修改app.wxss，定义全局样式

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

.bc_green{
    background-color: #09BB07;
}
.bc_red{
    background-color: #F76260;
}
.bc_blue{
    background-color: #10AEFF;
}
.bc_yellow{
    background-color: #FFBE00;
}
.bc_gray{
    background-color: #C9C9C9;
}

运行结果

开发试题展示功能

新增test页面

pages目录下新建test目录，并添加4个文件，如图所示：

修改test.js

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    test_id:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({test_id:options.testId})
  }
	})

修改test.wxml

<!--pages/test/test.wxml-->
<text>我是{
  {test_id}}</text>

运行结果

在试题分类页点击某一分类，跳转到试题页，试题页显示分类id

Mock试题数据

项目目录下新增data目录，data目录新增json.js，存放我们的试题模拟数据。

var json = {
  "18": [
    {
      "question": "This mobile OS held the largest market share in 2012.?",
      "option": {
        "A": "iOS",
        "B": "Android",
        "C": "BlackBerry",
        "D": "Symbian"
      },
      "true": "A",
      "scores": 10,
      "checked": false
    },
    {
      "question": "This mobile OS held t