只需一步，快速开始
扫一扫，登录网站
后使用快捷导航没有帐号？
内容整理于微信公开课 为什么要做性能优化？ 一切性能优化都是为了体验优化 1. 使用小程序时，是否会经常遇到如下问题？
打开是一直白屏
打开是loading态，转好几圈
我的页面点了怎么跳转这么慢？
需求开发小程序的朋友们随时都会听到一句话：“喂，快给我打一个xxx环境的预览码”，无论你正在干什么，都得赶紧地回一句：“稍等，这就给你打码……”然后苦逼的你build了一个xxx环境的包，打开了微信开发者工具， ...
微信这次升级开放了小程序“收藏夹”入口，应该会对小程序生态有着非常重要的影响。瞎猜一下，普通用户都会把哪些小程序放到“我的小程序”栏目里。 ...
写在前面 最近在做小程序，发现制作分享到朋友圈图片是每个项目必须的。遇到坑比较多，写起来也比较繁琐，也没有找到类似组件，所以就自己动手写了一个。 演示
左侧是 canvasdrawer 绘制的，右侧是UI给的图
为了解决小程序生成分享到朋友圈图片的问题，我们开启了画家计划--- 一个小程序图片生成库。该计划已开源，可移步：github.com/Kujiale-Mob…。 大家知道 Canvas 的绘制有很多很蛋疼的坑，其中一个是它的 drawImage
我的一些关于小程序的看法和社区框架选型比较，部分观点取之于社区。Vue重度使用者也许会在wepy和mpvue中徘徊，React和TypeScript重度使用者在现阶段当之无愧Taro首选。
这是一篇我与小程序的故事，但小程序的过去 ...
官方文档最近在调研小程序的分享能力，本篇文档主要是调研小程序关于分享方面的玩法，目的是学习小程序在项目应用以及玩法链上的扩展。API层面onShareAppMessage小程序如果想对外分享，必须在page里面定义onShareApp ...
业务中碰到微信小程序需要生成海报进行朋友圈分享，这个是非常常见的功能，没想到实际操作的时候花了整整一天一夜才搞好，微信的 canvas 绘图实在是太难用了，官方快点优化一下吧。 业务非常简单，只需要将用到的图 ...
在开发一个小程序项目时，需要在页面中观看视频，就需要使用到微信小程序的腾讯视频插件，这样就可以在页面中引用腾讯视频，而无需使用自己的服务器进行视频的播放，节约了很大的服务器开支。但是微信小程序插件的文 ...
如图，本次案例要做的是右下角的客服按钮和蓝色渐变的提示卡片，可随时关闭的。微信官方给了客服按钮标签contact-buttontype=&default-dark&size=&100&/contact-button这个标签的样式不可修改，如果我们要换自己想改 ...
本文的核心宗旨是带着新手一起入坑mpvue(没朋友)，如果看完没有成功入坑，请再看一遍，谢谢
小程序不需要安装，即点即用，用完即走。用户使用没有心里负担，并且省了 APP下载的漏斗转化的核心问题。
第一个智能小程序申请帐号使用百度帐号（没有百度帐号会自动创建）登录智能小程序开发者后台。登录成功后，选择类型、填写信息并提交相应的资料。提交完资料，等待审核。审核通过后，就可以拥有自己的智能小程序帐号 ...
介绍手百智能小程序介绍智能小程序是一种新的开放能力，开发者可以快速地开发一个智能小程序。通过搜索，用户可以在手百 App 内被便捷地获取和传播。框架概述SWAN App 基本开发思路类似于前端开发，并增强调用大量端 ...
前言前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解 ...
1 / 194 页微信小程序开发教程--从零开始 - 简书
微信小程序开发教程--从零开始
从零开始小程序
今天一不小心拿到了小程序的内测资格，为了不辜负微信团队的信任，我决定十一奋斗一把！不过话说我可是一个Android工程师啊！所以就让我们从零开始！
所以本文非常适合非前端工程师学习！哈哈！都说小程序出来前端会抢移动端饭碗，但是据我所知现在好多学习的都是移动开发工程师，谁抢谁的还不一定呢！
PS：表问我怎么拿到小程序内测资格的，有种东西叫内部资源！
Hello World
创建程序实例
美化ActionBar
超级Hello World
事件绑定函数
更新界面数据
就不多说了，没有内测码去下载个破解版吧，我用了一下，学习完全够了！
图片发自简书App
JavaScrip还是要看看的，推荐教程
HTML+CSS 大概知道是干啥的就行
微信小程序中就四种类型的文件
----------
JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml -------
类似HTML文件
wxss -------
类似CSS文件
在根目录下用app来命名的这四中类型的文件，就是程序入口文件。
必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行
以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口
背景色，配置导航条样式，配置默认标题。
必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
这个文件不是必须的。因为它只是个全局CSS样式文件
这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序，IDE就不会报错了，也意味着这是最简单的微信小程序
Paste_Image.png
Hello World
创建程序实例
app.js文件管理整个程序的生命周期，所以在里面添加如下代码：（输入App IDE会有提示）
onLaunch: function () {
console.log('App Launch')
onShow: function () {
console.log('App Show')
onHide: function () {
console.log('App Hide')
具体API解释如下
Paste_Image.png
美化ActionBar
json文件负责配置ActionBar颜色，我们只需要在里面添加如下代码即可，下图有参数说明！
Paste_Image.png
Paste_Image.png
"window":{
"navigationBarBackgroundColor": "#BBDEF8",
"navigationBarTitleText": "Demo",
"navigationBarTextStyle":"white"
Paste_Image.png
现在看ActionBar是不是像那么回事了！好接下来我们继续写我们第一个界面
美化页面我们用到了 wxml 和 wxss文件
为了程序代码结构简洁
我们需要在跟目录下创建一个新文件夹 名字随意，我们这里叫pages
然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index
然后我们创建index.wxml文件然后在里面写入以下代码
&text class="window"&Hello&/text&
然后创建index.wxss文件然后在里面写入以下代码
color=#4995
然后我们创建 index.js文件
在文件中输入如下代码（输入Page IDE会有提示）
// text:"这是一个页面"
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
onReady:function(){
// 页面渲染完成
onShow:function(){
// 页面显示
onHide:function(){
// 页面隐藏
onUnload:function(){
// 页面关闭
函数解释如下：
Paste_Image.png
Json文件负责配置页面路径
所以我们在里面加入如下代码
其中index的含义 其实就是指index.js文件
这里需要说明一点 pages 里面的路径其实是指向js文件的
如果一个目录下没有该名称的js文件是会报错的！
"pages/index/index"
完成了！我们来运行程序！
Paste_Image.png
超级Hello World
为了学习事件绑定，以及如何将数据在页面上更新
我们来做个超级Hello World，就是我点击文字，能让
我们打开index.wxml 将里面代码改成这样
&text catchtap="click" class="window"&Hello&/text&
其实也就是加了
catchtap="click"
这两个属性是什么意思呢 别着急 我会一一解释
Paste_Image.png
上图展示了事件的一些的属性名称，这里需要注意红框标注起来的内容，区分出冒泡事件和非冒泡事件，其实冒泡事件就是需要往上面一层容器传递这个事件。
看了这图 我们再来看 catchtap="click" 的含义
catch 代表非冒泡事件
tap 代表点击事件
所以连在一起就是非冒泡点击事件
那后面那个click是啥
click 其实只是个变量名字
我们在index.js需要用这个名字绑定接收事件的函数
我们打开index.js
然后添加如下函数
click:function(){
console.log("点击了文字");
添加完后代码长这样 红框中就是 添加的这个代码
Paste_Image.png
所以其实点击事件的回调函数 就是 catchtap="click"
中的 click 后面加上 :function() 构成的
现在我们来运行程序试试 然后点击文字
Paste_Image.png
看是不是调用了 click:function 函数 并且打出了log
好接下来我们写点击一下变色的逻辑
那如何让一个文字变色呢，当然是css
所以我们需要再index.wxss 中添加一个样式
.window-red{
color:#D23933;
Paste_Image.png
然后我们进入index.js文件
你会发现代码里面有个 data:{} 它不是page生命周期函数
其实他是个变量的数组，这个里面申请的变量都可以在 wxml中使用
Paste_Image.png
我们在这里申请一个color
Paste_Image.png
color的值就是index.wxss中的样式名称
然后进入index.wxml中,将class中的值改成 {{color}}
Paste_Image.png
其实意思就是 将js文件中变量 color的值在这里使用
也就是值等于 window
然后我们再回到index.js文件
在最上面申请一个变量控制点击
然后在click:function() 函数中添加如下代码
click:function(){
console.log("点击了文字");
color = "window-red";
color = "window";
this.setData({
修改完后的代码如图
Paste_Image.png
其实就是在点击是后 更换color变量的值 而更换的这个值其实就是样式的名称
更新界面数据
这里有个问题 我们更换完值 但是在wxml中不会立即生效
所以我们需要调用
this.setData()方法将值同步给wxml 让它立即生效
好了我们运行程序 点击Hello 看看是不是点一下 变一下颜色！
111111.gif
最后再补充一点 index目录下也是可以配置 json文件的
也就是每个页面都可以配置自己独特的actionbar颜色等等
这里的配置会覆盖 app.json文件的配置
最后附上github 地址
最后由于着急睡觉 ，所以错别字比较多，后面整理望大家见谅
喜欢的话欢迎打赏~！！！我会继续写下去的
一个90后Geek
前言 微信小程序暂时处于内测期间，公司大的版本刚好上线了，闲来无事，看看微信小程序的文档，顺便学习学习，在此希望和大家一起共勉，发现自己越来越懒惰了，越活越没上进心了，有点危险，给自己敲下警钟吧。废话不多说，开始记录下这些天学习到的一些知识，希望对正在阅读的你有所帮助！本文...
从微信小程序开发教程-从零开始（1）中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表，这篇文章我将讲解列表的点击以及UI的优化，达到一个我们预期的一种效果。 首先我们创建一个详情的界面所需的文件,如下图所示: 详情页的话，我们暂时随便搭建一下，主要是看下怎么做跳...
微信小程序开发教程-从零开始（2） 前俩章中我们学会了怎么搭建一个微信小程序的框架以及显示一个文章列表，这篇文章我将讲解列表的网络请求以及网络数据的对接。 首先找到我们的index.js文件，然后看看微信小程序的网络请求文档很轻松的就可以找到我们的示例代码： url为我们需...
原文地址：http://www.jianshu.com/p/aaef5ceb3936，为便于阅读有部分删改。这篇文章写的非常简易，适应刚下载开发工具的新手学习。 IDE准备 下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/dev...
原文：http://gold.xitu.io/entry/57e34d6bde9ad7/promote?utm_source=baidu&utm_medium=keyword&utm_content=weixin_xiaoyinyong&utm_camp...
我把项目中做的图库抽了出来，本项目中包括了以下内容：1、图库选图，可多选，单选，可选完图片后进行裁剪，2、查看大图(包括sd卡，res，网络图)，并可以保存到手机图库,3、适配沉浸式状态栏 ,4 、使用fresco加载图片(图片是随便网上找的，性感吧- -!) 下面来看几张...
针织衫分为针织外套和针织毛衣，今天我们重点来看下单穿的针织毛衣，当这款针织衫上场的时候把秋季的温暖和温柔一并找回来了！ 在T台秀场针织衫有多高级你一看就知道！ Jil Sander Fall 2017 Krizia Fall 2017 Au Jour Le Jour Fal...
小姑子抱怨嫂子家有钱干嘛不让我家沾沾光 文/心岸姐姐 今天我在腾讯网看到了一个热帖引发的全国网民围观，并大喷。 自然我也就看了下热闹，先说说这个热帖的内容。贴子是一个小姑子写的， 她发的帖子题目是《我是一个小姑子，...
看这部剧觉得很有趣，头脑是晕乎乎的看完的。 在这样的一个意外里，居然还有其他的意外在发生，这意外本身就是一个大大的惊喜。 《意外制造公司》听着名字不想看，可是当我听完李欣频老师的推荐后，又在晕乎乎刷片子时，看到了这个名字，想都没想，立马就点下去了。 1 开始第一个镜头就是男...
等待着， 你变成了最后的希望 只是为了看到彩虹的出现 用心期盼着最后的梦想 不变的只是等待的心情 一阵阵的冷风吹醒了 沉睡的意思 只因你是晚来的雨 为什么！ 雨过天晴不会出彩虹 一刹那！ 看上去的一切是似又回到原点 何必在幻想中生存 所谓的希望 也许会在雨中呐喊出 最后一次...首个微信小程序开发教程，通宵吐血写的！ - 文章 - 伯乐在线
& 首个微信小程序开发教程，通宵吐血写的！
微信应用号（小程序，「应用号」的新称呼）终于来了！
目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心「小程序」的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？
我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧——
开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
1. 获取微信小程序的 AppID
首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录 https://mp.weixin.qq.com ，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。
注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份 – 开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
2. 创建项目
我们需要通过开发者工具，来完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。
项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果，在「项目」里可以发送到手机里预览实际效果。
3. 编写代码
点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
getUserInfo:function(cb){
var that =
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userI
typeof cb == "function" && cb(that.globalData.userInfo)
globalData:{
userInfo:null
123456789101112131415161718192021222324252627282930
//app.jsApp({&&onLaunch: function () {&&&&//调用API从本地缓存中获取数据&&&&var logs = wx.getStorageSync('logs') || []&&&&logs.unshift(Date.now())&&&&wx.setStorageSync('logs', logs)&&},&&getUserInfo:function(cb){&&&&var that = this;&&&&if(this.globalData.userInfo){&&&&&&typeof cb == "function" && cb(this.globalData.userInfo)&&&&}else{&&&&&&//调用登录接口&&&&&&wx.login({&&&&&&&&success: function () {&&&&&&&&&&wx.getUserInfo({&&&&&&&&&&&&success: function (res) {&&&&&&&&&&&&&&that.globalData.userInfo = res.userInfo;&&&&&&&&&&&&&&typeof cb == "function" && cb(that.globalData.userInfo)&&&&&&&&&&&&}&&&&&&&&&&})&&&&&&&&}&&&&&&});&&&&}&&},&&globalData:{&&&&userInfo:null&&}})
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口
背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
"pages/index/index",
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
123456789101112
{&&"pages":[&&&&"pages/index/index",&&&&"pages/logs/logs"&&],&&"window":{&&&&"backgroundTextStyle":"light",&&&&"navigationBarBackgroundColor": "#fff",&&&&"navigationBarTitleText": "WeChat",&&&&"navigationBarTextStyle":"black"&&}}
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
/**app.wxss**/
.container {
height: 100%;
flex-direction:
align-items:
justify-content: space-
padding: 200rpx 0;
box-sizing: border-
12345678910
/**app.wxss**/.container {&&height: 100%;&&display: flex;&&flex-direction: column;&&align-items: center;&&justify-content: space-between;&&padding: 200rpx 0;&&box-sizing: border-box;}
3. 创建页面
在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径 + 页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。
index.wxml 是页面的结构文件：
&!--index.wxml--&
&view class="container"&
bindtap="bindViewTap" class="userinfo"&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
12345678910
&!--index.wxml--&&view class="container"&&&&view&&bindtap="bindViewTap" class="userinfo"&&&&&&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&&&&&&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&&&&/view&&&&view class="usermotto"&&&&&&text class="user-motto"&{{motto}}&/text&&&&/view&&/view&
本例中使用了、、来搭建页面结构，绑定数据和交互处理函数。
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
//index.js
//获取应用实例
var app = getApp()
motto: 'Hello World',
userInfo: {}
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
1234567891011121314151617181920212223242526
//index.js//获取应用实例var app = getApp()Page({&&data: {&&&&motto: 'Hello World',&&&&userInfo: {}&&},&&//事件处理函数&&bindViewTap: function() {&&&&wx.navigateTo({&&&&&&url: '../logs/logs'&&&&})&&},&&onLoad: function () {&&&&console.log('onLoad')&&&&var that = this&&&&//调用应用实例的方法获取全局数据&&&&app.getUserInfo(function(userInfo){&&&&&&//更新数据&&&&&&that.setData({&&&&&&&&userInfo:userInfo&&&&&&})&&&&})&&}})
index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo {
flex-direction:
align-items:
.userinfo-avatar {
width: 128
height: 128
margin: 20
border-radius: 50%;
.userinfo-nickname {
.usermotto {
margin-top: 200
123456789101112131415161718192021
/**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: #}&.usermotto {&&margin-top: 200px;}
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
logs 的页面结构
&!--logs.wxml--&
&view class="container log-list"&
&block wx:for-items="{{logs}}" wx:for-item="log"&
&text class="log-item"&{{index + 1}}. {{log}}&/text&
&!--logs.wxml--&&view class="container log-list"&&&&block wx:for-items="{{logs}}" wx:for-item="log"&&&&&&text class="log-item"&{{index + 1}}. {{log}}&/text&&&&/block&&/view&
logs 页面使用 控制标签来组织代码，在 上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
var util = require('../../utils/util.js')
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
1234567891011121314
//logs.jsvar util = require('../../utils/util.js')Page({&&data: {&&&&logs: []&&},&&onLoad: function () {&&&&this.setData({&&&&&&logs: (wx.getStorageSync('logs') || []).map(function (log) {&&&&&&&&return util.formatTime(new Date(log))&&&&&&})&&&&})&&}})
运行结果如下：
4. 手机预览
开发者工具左侧菜单栏选择「项目」，点击「预览」，扫码后即可在微信客户端中体验。
目前，预览和上传功能尚无法实现，需要等待微信官方的下一步更新。
如你所见，微信官方给出的开发指南还非常简单，很多细节、代码和功能都没有明确的展示，所以接下来就到博卡君展示实力的时候啦！开发教程正式开始！
第一章：准备工作
做好准备工作很重要。开发一个微信应用号，你需要提前到微信的官方网站（weixin.qq.com）下载开发者工具。
1. 下载最新微信开发者工具，打开后你会看到该界面：
2. 点击「新建 web+」项目，随后出现如下画面：
3. 该页面内的各项内容需要注意——
AppID：依照官方解释来填。
Appname: 项目最外层文件夹名称，如你将其命名为「ABC」，则之后的全部项目内容均将保存在「/ABC/…」目录下。
本地开发目录：项目存放在本地的目录。
注：再次强调，如果你和团队成员共同开发该项目，则建议你们使用同样的目录名称及本地目录，以确保协同开发的统一性。如果你之前已有项目，则导入过程与以上内容近似，不再赘述。
4. 准备工作全部完成后，点击「新建项目」按钮，弹出框点「确定」。
5. 如上图所示，此刻，微信开发者工具已经为你自动构建了一个初始的 demo 项目，该项目内包含了一个微信应用项目所需具备的基本内容和框架结构。点击项目名称（图中即「cards」）进入该项目，就能看到整个项目的基本架构了：
第二章：项目构架
微信目前用户群体非常庞大，微信推出公众号以后，火爆程度大家都看得到，也同样推动着 h5 的高速发展，随着公众号业务的需求越来越复杂，应用号现在的到来也是恰到好处。我们团队具体看了一两次文档后发现，它提供给开发者的方式也在发生全面的改变，从操作 DOM 转为操作数据，基于微信提供的一个过桥工具实现很多 h5 在公众号很难实现的功能，有点类似于 hybrid 开发，不同于 hybrid 开发的方式是：微信开放的接口更为严谨，结构必须采用他提供给我们的组件，外部的框架和插件都不能在这里使用上，让开发者完全脱离操作 DOM，开发思想转变很大。
工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整个运作流程。
生命周期：
在index.js里面：
开发者工具上 Console 可以看到：
在首页 console 可以看出顺序是 App Launch–&App Show–&onload–&onShow–&onReady。
首先是整个 app 的启动与显示，app 的启动在 app.js 里面可以配置，其次再进入到各个页面的加载显示等等。
可以想象到这里可以处理很多东西了，如加载框之类的都可以实现等等。
路由在项目开发中一直是个核心点，在这里其实微信对路由的介绍很少，可见微信在路由方面经过很好的封装，也提供三个跳转方法。
wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
wx.navigateBack()：关闭当前页面，回退前一页面。
这三个基本上使用足够，在路由方面微信封装的很好，开发者根本不用去配置路由，往往很多框架在路由方面配置很繁琐。
此次微信在组件提供方面也是非常全面，基本上满足项目需求，故而开发速度非常快，开发前可以认真浏览几次，开发效率会很好。
任何外部框架以及插件基本上无法使用，就算原生的 js 插件也很难使用，因为以前我们的 js 插件也基本上全部是一操作 dom 的形式存在，而微信应用号此次的架构是不允许操作任何 dom，就连以前我们习惯使用的动态设置的rem.js也是不支持的。
此次微信还提供了 WebSocket，就可以直接利用它做聊天，可以开发的空间非常大。
跟公众号对比我们发现，开发应用号组件化，结构化，多样化。新大陆总是充满着惊喜，更多的彩蛋等着大家来发现。
接下来开始搞一些简单的代码了！
1. 找到项目文件夹，导入你的编辑器里面。在这里，我使用了 Sublime Text 编辑器。你可以根据自己的开发习惯选择自己喜欢的编辑器。
2. 接下来，你需要根据自己的项目内容调整项目结构。在范例项目中，「card_course」目录下面主要包含了「tabBar」页面以及该应用的一些配置文件。
3. 示例项目的「tabBar」是五个菜单按钮：
4. 找到「app.json」文件，用来配置这个五个菜单。在代码行中找到「”tabBar”」：
你可以根据实际项目需求更改，其中：
「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。
「“list”」下的代码顺序必须依次放置，不能随便更改。
「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。
「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。
「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。
「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。
注意：微信的底部菜单最多支持五栏（五个 icons），所以在你设计微信应用的 UI 和基本架构时就要预先考虑好菜单栏的排布。
5. 根据以上代码规则，我做好了示例项目的基本架构，供你参考：
6. 「Json」文件配置好后，「card_course」的基本结构入上图所示，不需要的子集都可以暂时删除，缺少的子集则需要你主动新建。删除子集时记得顺带检查一下「app.json」里的相关内容是否已经一并删除。
注意：我个人建议你新建一个「wxml」文件的同时，把对应的「js」和「wxss」文件一起新建好，因为微信应用号的配置特点就是解析到一个「wxml」文件时，会同时在同级目录下找到同文件名的「js」和「wxss」文件，所以「js」文件需及时在「app.json」里预先配置好。
编写「wxml」时，根据微信应用号提供的接口编码即可，大部分就是以前的「div」，而我们现在就用「view」即可。需要用其它子集时，可以根据微信提供的接口酌情选择。
使用「class」名来设置样式，「id」名在这里基本没有什么用处。主要操作数据，不操作「dom」。
7. 以上是示例项目首页的「wxml」编码。从图中就可以看出，实现一个页面代码量非常少。
8. 「Wxss」文件是引入的样式文件，你也可以直接在里面写样式，示例中采用的是引入方式：
9. 修改代码后刷新一次，可以看到未设背景的「view」标签直接变成了粉色。
注意：修改「wxml」和「wxss」下的内容后，直接 F5 刷新就能直接看到效果，修改「js」则需点击重启按钮才能看到效果。
10. 另外，公共样式可以在「app.wxss」里直接引用。
11. 「Js」文件需要在「app.json」文件的「”page”」里预先配置好。为了项目结构清晰化，我在示例项目中的「index」首页同级目录新建其它四个页面文件，具体如下：
经过以上步骤，案例中的五个底部菜单就全部配置完毕了。
关于作者：}