学习目标：
从认识小程序开始搭建开发环境，以案例结尾。
学习内容：
1.认识小程序（相关概念） 2.知识储备 3.搭建开发环境 4.目录介绍 5.代码编写 6.文件配置
学习时间：
抽出20分钟基本就可以完成前期学习
文章目录
- 学习目标：
- 学习内容：
- 学习时间：
- 1.了解应用如何开发
- 2.微信、公众号、小程序
- 3.小程序和公众号的区别
- 3.小程序和APP的区别
- 1.安装开发环境
- 2.安装：傻瓜式安装>>一直下一步
- 3.创建项目
- 4.工具使用介绍
- 概念1：小程序项目由n个页面组成
- 概念2：每个页面一般由4个核心文件，分别为逻辑代码（js）、页面结构（wxml）、页面样式（wxss）、页面配置（json）
- 1.核心开发思想
- 2.创建页面
- 3.实现步骤
- 4.数据绑定
- 5.实现步骤
- 6.数据遍历和判断
- 7.实现步骤
一、认识微信小程序
1.了解应用如何开发
Web App（内嵌内浏览器打开指定网页）
Native App（原生开发，也就是使用iOS和Android代码开发）
Hybrid App（混合APP开发，写DIV+CSS+JS+PHP代码开发）
2.微信、公众号、小程序
微信：聊天工具
微信公众号：企业或者个人组织管理粉丝/用户应用（类似于APP)
微信小程序：不需要下载安装即可使用的软件/应用/APP
3.小程序和公众号的区别
3.小程序和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：双击开发者工具，用微信扫码登录即可
步骤2：创建
4.工具使用介绍
四、目录介绍
概念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.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
<!--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" //选中图片
}
....
}
