这篇带你分分钟入门小程序开发。从认识小程序开始到搭建开发环境以及代码编写，文章过长，建议保存慢慢看。一、认识微信小程序（1）先了解应用如何开发Web App（内嵌内浏览器打开指定网页）Native App（原生开发，也就是使用iOS和Android代码开发）Hybrid App（混合APP开发，写DIV+CSS+JS+PHP代码开发）（2）微信、公众号、小程序微信：就是一个聊天工具（类似于QQ）微信公众号：企业或个人组织管理其粉丝/用户的应用（类似于APP）微信小程序：不需要下载安装即可使用的软件/应用/APP（3）小程序和公众号的区别（4）小程序与APP的区别二、知识储备【重要】HTML、CSS、JavaScript、PHP（基础）、MySQL（基础）【次要】接触过Angular / Vue / React之类的前段框架【次要】了解Node、ECMAScript 2015（ES6）更好三、搭建开发环境（1）安装开发工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html（2）安装：傻瓜式安装>>一直下一步（3）创建项目步骤1：双击开发者工具，用微信扫码登录即可（4）创建：（5）工具使用介绍四、目录介绍概念1：小程序项目由n个页面组成概念2：每个页面一般由4个核心文件，分别为逻辑代码（js）、页面结构（wxml）、页面样式（wxss）、页面配置（json）& 多学一招：& wxml其实就是写HTML代码& wxss其实就是写css代码五、代码编写1.核心开发思想步骤1：显示静态页面（DIV + CSS）步骤2：数据动态化（js发送异步请求获取数据，接着遍历显示数据）2.创建页面3.实现步骤：a.定义路由（名词，指设置一个网址来访问文件）
b.创建页面（js、wxss、wxml、json）
c.修改wxml写结构（html）
d.修改wxss写样式（css）
-------------------------4.数据绑定概 念：名词，指页面数据来源于js对象属性，并且对象属性值修改页面同步更新效果图：将上图【?】替换成【PHP学院】5.实现步骤a.修改js文件代码
b.修改wxml文件绑定数据
---------------shphp.wxml<!--pages/shphp/shphp.wxml-->
<view>【{{title}}】</view>
<view>当前页面：pages/shphp/shphp</view>
<view>
即可报名毕业
<text>薪资不达8K不收学费</text>
</view>shphp.js// pages/shphp/shphp.js
Page({
/**
* 页面的初始数据
*/
data: {
title: "上海PHP学院"
},
/**
* 生命周期函数--监听页面加载
* 相当于window.onload
*/
onLoad: function (options) {
}
})6.数据遍历和判断：效果图Page({
//初始化页面数据（data对象中的所有属性能被页面访问到）
data: {
title: '上海PHP学院',
uname: '小泽',
phpData: [
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' },
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' },
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }
]
},
/**
* 生命周期函数--监听页面加载
* 相当于window.onload
*/
onLoad: function (options) {
}
})7.实现步骤a. 修改js文件代码（直接复制上面的准备代码）b. 修改wxml文件代码shphp.jsPage({
//初始化页面数据（data对象中的所有属性能被页面访问到）
data: {
title: '上海PHP学院',
uname: '波妞',
phpData: [
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' },
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' },
{ title: '2018年PHP课程重磅升级', title2: '不8000就业不收学费' }
]
},
/**
* 生命周期函数--监听页面加载
* 相当于window.onload
*/
onLoad: function (options) {
}
})shphp.wxml<!--pages/shphp/shphp.wxml-->
<view>【{{title}}】</view>
<view>当前页面：pages/shphp/shphp</view>
<view>
即可报名毕业
<text>薪资不达8K不收学费</text>
</view>
<view wx:if="{{uname == '波妞'}}"> 爱妃，寡人马上就到 </view>
<view wx:elif="{{uname == '小泽'}}"> 赶快洗白白 </view>
<view wx:elif="{{uname == '仓仓'}}"> 仓仓 </view>
<view wx:else> 爱卿退下 </view>
<view wx:for="{{phpData}}">
{{index}}: {{item.title}}
</view>六、文件配置pages 声明小程序项目由哪些页面组成（注：默认加载第一个）"pages":[
"pages/joke/joke",
//笑话
"pages/picture/picture",
//趣图
"pages/shphp/shphp",
//上海PHP学院
"pages/index/index",
//小程序Demo页
"pages/logs/logs"
//小程序Demo页
],window 配置页面窗口"window":{
"navigationBarBackgroundColor": "#268dcd", //导航栏背景
"navigationBarTitleText": "无聊笑话",
//导航栏标题
"navigationBarTextStyle": "white",
//导航栏标题颜色
"enablePullDownRefresh": true,
//是否允许下拉刷新
"backgroundTextStyle": "light"
//下拉框样式
},tabBar 小程序底部导航"tabBar": {
"color": "#000000",
//底部菜单文字颜色
"selectedColor": "#268dcd",
//底部菜单文字选中颜色
"backgroundColor": "#ffffff",
//底部菜单背景颜色
"borderStyle": "white",
//底部菜单边框颜色
"list": [
//菜单个数(至少两个生效)
{
"text": "笑话",
"pagePath": "pages/joke/joke",
"iconPath": "image/ic_joke_gray.png",
//默认图标
"selectedIconPath": "image/ic_joke_blue.png" //选中图片
}
....
}七、案例：笑话小程序
(1)效果图
（2）页面布局将静态资源放到项目中笑话页面实现：a. 定义路由b. 创建目录和对应文件c. 修改wxml文件，声明页面结构d. 修改wxss文件，声明页面样式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;
}
.joke {
margin: 10px;
padding: 10px;
border-radius: 5px;
border-top: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
box-shadow: 2px 2px 2px #C7C7C7;
}joke.wxml<!--pages/joke/joke.wxml-->
<view class="joke">
<view>笑话1</view>
<view>2018-8-8</view>
</view>
<view class="joke">
<view>笑话1</view>
<view>2018-8-8</view>
</view> 趣图页实现方法：a. 定义路由b. 创建目录和对应文件c. 修改wxml文件，声明页面结构d. 修改wxss文件，声明页面样式底部菜单：实现：{
"pages": [
"pages/picture/picture",
"pages/joke/joke",
"pages/shphp/shphp",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarBackgroundColor": "#268dcd",
"navigationBarTitleText": "无聊笑话",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"backgroundTextStyle": "light"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#268dcd",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"list": [
{
"text": "笑话",
"pagePath": "pages/joke/joke",
"iconPath": "image/ic_joke_gray.png",
"selectedIconPath": "image/ic_joke_blue.png"
},
{
"text": "趣图",
"pagePath": "pages/picture/picture",
"iconPath": "image/ic_gif_gray.png",
"selectedIconPath": "image/ic_gif_blue.png"
}
]
}
}
（3）数据绑定-请求笑话接口接口：https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=2https://v.juhe.cn/joke/img/list.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=2&sort=asc&time=1418745237 a. 修改jsb. 修改页面joke.js// pages/picture/picture.js
Page({
/**
* 页面的初始数据
*/
data: {
jokeList: [
{ content: '笑话1', updatetime: '2018-8-8' },
{ content: '笑话1', updatetime: '2018-8-8' },
{ content: '笑话1', updatetime: '2018-8-8' }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var thatObj = this;
wx.request({
url: 'https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10',
success: function (res) {
console.log(res.data.result.data)
thatObj.setData({
jokeList: res.data.result.data
});
}
})
},
})
joke.wxml <!--pages/joke/joke.wxml-->
<view class="joke" wx:for="{{jokeList}}">
<view> {{item.content}}</view>
<view>{{item.updatetime}}</view>
</view>趣味图页面a.修改jsb.修改页面picture.js// pages/picture/picture.js
Page({
/**
* 页面的初始数据
*/
data: {
jokeList: [
{ content: '笑话1', updatetime: '2018-8-8', url: '' },
{ content: '笑话1', updatetime: '2018-8-8', url: '' },
{ content: '笑话1', updatetime: '2018-8-8', url: '' }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var thatObj = this;
wx.request({
url: 'https://v.juhe.cn/joke/img/list.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10&sort=asc&time=1418745237 ', //仅为示例，并非真实的接口地址
success: function (res) {
//console.log(res.data.result.data)
thatObj.setData({
jokeList: res.data.result.data
});
}
})
},
})picture.wxml<!--pages/picture/picture.wxml-->
<view class="joke" wx:for="{{jokeList}}">
<view> {{item.conotent}}</view>
<view>
<image src="{{item.url}}"></image>
</view>
<view>{{item.updatetime}}</view>
</view>