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

概览

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

• 使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK 详情
• 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

为了更好的开发体验，我们从视觉、交互、性能等方面对开发者工具进行升级，推出了 1.0.0 版本。

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

1. .json

   后缀的

   JSON

   配置文件

2. .wxml

   后缀的

   WXML

   模板文件

3. .wxss

   后缀的

   WXSS

   样式文件

4. .js

   后缀的

   JS

   脚本逻辑文件

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

小程序配置 app.json

app.json

app.json

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

WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中

HTML

CSS

JS

同样道理，在小程序中也有同样的角色，其中

WXML

HTML

pages/index/index.wxml

<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

WXSS 样式

WXSS

CSS

WXSS

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写

JS

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

点击

button

msg

"Hello World"

button

bindtap

clickMe

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

介绍

mpvue

Vue.js

mpvue

Vue.js

Vue.js

实践案例

美团酒旅、餐饮、到店、金融等业务接入。

名称由来

• mp

  ：mini program 的缩写

• mpvue

  ：Vue.js in mini program

主要特性

使用

mpvue

• 彻底的组件化开发能力：提高代码复用性
• 完整的

  Vue.js

  开发体验
• 方便的

  Vuex

  数据管理方案：方便构建复杂应用
• 快捷的

  webpack

  构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用

  Vue.js

  命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev