目录
这篇带你分分钟入门小程序开发。从认识小程序开始到搭建开发环境以及代码编写，文章过长，建议保存慢慢看。
一、认识微信小程序
（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
【{{title}}】
当前页面：pages/shphp/shphp
即可报名毕业
薪资不达8K不收学费
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.js
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) {
}
})shphp.wxml
【{{title}}】
当前页面：pages/shphp/shphp
即可报名毕业
薪资不达8K不收学费
爱妃，寡人马上就到
赶快洗白白
仓仓
爱卿退下
{{index}}: {{item.title}}
六、文件配置
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
笑话1
2018-8-8
笑话1
2018-8-8
趣图页
实现方法：
- 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=2
a. 修改js
b. 修改页面
// pages/picture/picture.jsPage({/*** 页面的初始数据*/data:{jokeList:[{content:笑话1,updatetime:2018-8-8},{content:笑话1,updatetime:2018-8-8},{content:笑话1,updatetime:2018-8-8}]},/*** 生命周期函数--监听页面加载*/onLoad:function(options){varthatObj=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
{{item.content}}
{{item.updatetime}}
趣味图页面
a.修改js
b.修改页面
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
{{item.conotent}}
{{item.updatetime}}
