零基础分分钟入门微信小程序开发，实战篇

学习目标：

从认识小程序开始搭建开发环境，以案例结尾。

---

学习内容：

1.认识小程序（相关概念） 2.知识储备 3.搭建开发环境 4.目录介绍 5.代码编写 6.文件配置

---

学习时间：

抽出20分钟基本就可以完成前期学习

---

---

一、认识微信小程序

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" //选中图片
}
....
}