做一个微信小程序是怎么做的?_微信小程序怎么做csdn

这篇带你分分钟入门小程序开发。从认识小程序开始到搭建开发环境以及代码编写，文章过长，建议保存慢慢看。

一、认识微信小程序

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

需要案例的小伙伴，留言，留言人多继续更新~