做任何程序开发要首先找到其官方文档，我们先来看看其有哪些官方文档。
微信小程序开发文档链接为：https://mp./debug/wxadoc/dev/index.html，如下图：
这里就是做微信小程序开发的全部官方文档。
知道了文档的位置，下面我们来介绍下如何做一个微信小程序开发：
&/*********************************************************************
微信小程序全套视频教程下载地址：
本套视频教程包含了微信小程序开发的基础知识，特别适合学习微信小程序开发入门使用，请按照顺序观看学习。
本套教程原来销售199元，现免费奉送，所有内容都是笔者亲自录制。
需要课程讲解中用到的示例源码请关注微信公众号：&微little程序&，按照提示获取源码。关注成功后，也可直接点击公众号中的&视频教程&菜单，详细了解获取配套示例源码的方式。
拿到示例源码后，自己再做尝试，学习会更有效果。
也可扫描下方二维码关注该公众号：
******************************************************************************/
第一步：下载微信小程序开发者工具并安装，下载路径：
进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。
第二步：登录工具
开发者工具安装完成后我们就可以将其打开，初次打开会需要用微信扫码登录，入下图，用手机微信扫一扫后确认登录就可以了。
第三步：创建一个项目
登录成功后，如果是第一次使用该工具会弹出创建项目的窗口，如下图：
在创建过程中，如果选择的本地文件夹是个空文件夹会出来一个勾选项&在当前目录中创建quick start项目&，为方便初学者了解微信小程序的基本代码结构，请勾选此项，勾选后，开发者工具会帮助我们在开发目录里生成一个简单的 demo，如下图：
第四步：项目代码结构解释
点击开发者工具左侧导航的&编辑&，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2、 app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
　　我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.
第五步：小程序页面文件构成
　　在这个示例中，我们有两个页面，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&
本例中使用了、、来搭建页面结构，绑定数据和交互处理函数。
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
index.wxss 是页面的样式表：
/**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;
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 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 页面使用&&控制标签来组织代码，在&&block/&&上使用&&绑定&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))
运行结果如下：
第五步：手机预览（只有获得AppId的才有权限预览）
开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。
&以上是微信小程序前端开发的基本流程，而实际上要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器并将后台服务器设置成https服务。而做这些的前提是要先购买好服务器和域名。服务器可以选择腾讯云服务器，购买地址如下：
要做一个可更新的小程序单有云服务器也还是不够，因为内容是可更新的，所以实际在小程序上看到的内容，我们大部分是存储在数据库中，所以我们还需要购买云数据库，这个腾讯云也有提供，购买地址如下：
而域名的购买，腾讯云也可以提供，购买地址：
本文由微信公众号&微little程序&整理发布，可在微信中搜索公众号&微little程序&关注，也可扫描下面的二维码关注。专注微信小程序领域，发布微信小程序资讯，探讨微信小程序开发技术。
最新文章将第一时间在该公众号中发布。
QQ交流1群：(已满)
QQ交流2群：
微信号：lxwl360
微信小程序社区：&
阅读(...) 评论()
友情链接:(联系QQ:)你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。微信小程序开发入门讲解
　& & 做任何程序开发都要首先找到其官方文档，微信小程序目前还在邀请内测阶段，目前官方放出了部分开发文档，经过笔者一天的查看和尝试，感觉文档并不全面，但是通过这些文档已经能够看出其大概面貌了。闲话不多说，我们先来看看其有哪些官方文档。
& && &&&微信公众平台开发者文档统一入口为：https://mp./wiki，这里面大部分内容都是以前就有的，微信开发都是基于此份文档。
& && &&&现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口，这个入口才就是专门针对微信小程序开发的文档，如下图：
点击“微信公众平台. 小程序”，进入详细页，如下图：
这里就是目前发布的所有文档啦。
知道了文档的位置，下面我们来介绍下如何做一个微信小程序开发：
第一步：下载微信小程序开发者工具并安装，下载路径：
https://mp./debug/wxadoc/dev/devtools/download.html
进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。
微信小程序视频教程下载地址：
第二步：创建一个项目
开发者工具安装完成后我们就可以将其打开，初次打开会弹出创建项目的窗口，如下图：
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo，为了方便后面的学习，请务必选择“是”。
第三步：项目代码结构解释
& && &&&点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
& && &&&下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2、 app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
　　我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.
第四步：小程序页面文件构成
　　在这个示例中，我们有两个页面，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&&&&
&view&&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&&&
本例中使用了&view/&、&image/&、&text/&来搭建页面结构，绑定数据和交互处理函数。
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
index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo {&&
& & display:&&
& & flex-direction:&&
& & align-items:
.userinfo-avatar {&&
& & width: 128&&
& & height: 128&&
& & margin: 20&&
& & border-radius: 50%;
.userinfo-nickname {&&
& & color: #
.usermotto {&&
& & margin-top: 200
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 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 页面使用 &block/& 控制标签来组织代码，在 &block/& 上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
var util = require('../../utils/util.js')
& & logs: []&&},
&&onLoad: function () {& &
& & this.setData({
& && &logs: (wx.getStorageSync('logs') || []).map(function (log) {& && && && && && &&&return util.formatTime(new Date(log))
运行结果如下：
第五步：手机预览（只有获得AppId的才有权限预览）
开发者工具左侧菜单栏选择&项目&，点击&预览&，扫码后即可在微信客户端中体验。
本文转载自微信小程序微信公众号：“微little程序”，微信二维码：
预告：下期将在公众号中详细介绍一下其API文档。
微信小程序交流QQ群：
微信小程序社区：
3 总笔记数
1.4万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：课程名称读取中
支付宝支付
由百度云提供技术支持
&学院APP&&
扫描微信二维码精彩活动、课程更新抢先知
下载客户端，离线视频任您学
2.&预习课程
加入购物车
【课程类型】实战教学
【难度级别】高级
【适合人群】中高级研发工程师
【课程介绍】 “零基础学习微信小程序”课程，以腾讯官方资料为课程唯一参考资料，教会同学如何看懂文档，对文档中晦涩难懂的表述进行解释。实战角度出发，讲解微信小程序开发的相关知识点，分享小程序开发经验。
【课程目标】 “零基础学习微信小程序”课程，以腾讯官方资料为课程唯一参考资料，教会同学如何看懂文档，对文档中晦涩难懂的表述进行解释。实战角度出发，讲解微信小程序开发的相关知识点，分享小程序开发经验。
【课程计划】 “零基础学习微信小程序”课程，以腾讯官方资料为课程唯一参考资料，教会同学如何看懂文档，对文档中晦涩难懂的表述进行解释。实战角度出发，讲解微信小程序开发的相关知识点，分享小程序开发经验。
全部评价（0）
60课程360484学员4255人阅读
微信小程序（2）
今天微信小程序正式上线，抱着学习新技术的心态开始第一次接触微信小程序，无论外面怎么吹微信小程序怎么干掉大量的原生的app，作为一个新的事物，存在就必定有其存在的价值，作为一个学习者要保持一个正确的学习心态。勇于的追求新的东西。
张小龙对小程序的定义：
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时随地可用，但又无需安装卸载。
可以看出下小程序有以下的特点：
小程序适合做功能简单的应用
小程序适合做性能要求不高的应用
一个开发者开发应用是否用小程序开发时候，要结合小程序的自身特点进行分析适不适合。
开发者工具
工欲善其事必先利其器，目前开发微信小程序有自己的ide，下面是ide 的下载地址。
扫二维码登陆，目前打开是这样子的：
具体是使用说明，官方有给出说明
第一个欢迎页面
通过找资料入门微信小程序的开发，下面是第一个欢迎页面：
整个页面很简单，主要由一张图片，文字，以及一个按钮+文字组成，三者都是垂直居中，可以将他们放到一个容器中，整体居中，垂直向下排列，再对每个节点进行css样式的调整。
写欢迎页面首先在ide中先建立相应的目录结构：
目录结构与文件分析：
images目录：位于顶级目录，主要存放图片
pages目录：位于顶级目录，存放小程序应用主要信息
welcome目录：存放欢迎页的信息
welcome.js文件：欢迎页的脚本文件
welcome.json文件：欢迎页的配置文件
welcome.wxml文件：欢迎页的页面结构文件（类似与html代码）
welcome.wxss文件：欢迎页的css样式文件
app.js:顶层文件，app的全局脚本文件
app.json:顶级文件，app的全局配置文件
app.wxss:顶层文件，app的全局样式文件
目录创建完毕后，开始在welcome.wxml编写欢迎页的页面结构：
####页面结构
class="container"&
class="myphoto" src="/images/MyIcon.png"&&
class="motto"&Hello Zan&
class="button"&
class="button-text"&第一个小程序&
直接运行会出错，因为没有指定app加载的页面，通过查找官方api文档找到加载页面的方法：
需要在app.json文件中做相应的修改即可：
"pages/welcome/welcome"
运行效果如下：
在welcome.wxss文件添加相应的样式：
.container{
display: flex;
flex-direction: column;
align-items: center;
width: 200rpx;
height:200rpx;
margin-top: 200rpx;
margin-top: 100rpx;
font-size: 32rpx;
margin-top: 200rpx;
border: 2rpx solid #405f80;
border-radius:10rpx;
height: 60rpx;
width:200rpx;
text-align: center;
.button-text{
font-size: 22rpx;
color: #405f80;
height: 100%;
background-color:#b3d4db;
在全局app.wxss文件中可以定义字体：
font-family: Microsoft Yahei;
最后在，通过改变导航栏的颜色与背景颜色一致实现。api文档：
在app.json文件进行配置去掉黑色的导航栏：
"pages/welcome/welcome"
"window": {
"navigationBarBackgroundColor": "#b3d4db"
最后的效果：
通过再微信提供的ide写欢迎页，给我的感觉是ide不够完善，图片不能直接同过ide添加，只能通过找到电脑中磁盘对应的目录才能添加，欢迎页使用的几乎都是web前端技术，所以有web前端基本知识+官方文档就能入门微信小程序。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12604次
排名：千里之外
原创：21篇
(1)(3)(1)(2)(1)(5)(7)(1)}