微信小程序——收尾和总结

微信小程序特点：
1，开发便捷
2，容易推广
3，无法承载复杂功能
如果您的项目满足以上三大特点，那就果断选择小程序吧

一、小程序开发之部署与安装
登录微信公众平台
https://mp.weixin.qq.com/
注册自己的平台账号，开始小程序开发之旅

二、下载微信开发者工具
安装后如图所示

image.png

并下载小程序demo
使用微信开发者工具打开
（ps：我们这里仅介绍小程序的开发）

这是我们的文件目录：

image.png

三、开发之前你需要知道的事
1，约定：将同一目录下，同名前缀，后缀为（js，json，wxss，wxml）的四个文件，视为同一页面的四个部分，其作用分别为：
js：JavaScript脚本文件
json：页面配置文件
wxml：类似于html，用于承载页面信息
wxss：类似于css，样式文件
2，程序主入口
app.js
在该js文件中，执行

App({
 onLaunch: function () {
console.log('App Launch')
 },
 onShow: function () {
console.log('App Show')
},
onHide: function () {
  console.log('App Hide')
},
globalData: {
  hasLogin: false,
  openid: null
})

初始化整个项目
app.wxss有全局样式
app.json配置整个项目

{
"pages":[
  "pages/Home/home",
  "pages/goods/goods",
],
"tabBar": {
  "color": "#dddddd",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [{
    "pagePath": "pages/Home/home",
    "iconPath": "image/icon/home-no-selected.png",
    "selectedIconPath": "image/icon/home-selected.png",
    "text": "首页"
  },{
    "pagePath": "pages/goods/goods",
    "iconPath": "image/icon/goods-no-selected.png",
    "selectedIconPath": "image/icon/goods-selected.png",
    "text": "商品"
  }]
},
"window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "Map",
  "navigationBarTextStyle":"black"
},
"debug": true

}

pages为一个数组，用于声明需要加载的页面
比如Home/home
表示在目录Home中，的home页面，其由：
home.js home.json home.wxss home.wxml
四大部分组成
tabBar为下方导航栏

image.png

四、服务端选择
服务端的选择是多样的，腾讯推荐使用腾讯云，并使用nodejs或php开发。但是这里我们仅介绍使用rails作为服务端，并且只提供简单的几个接口。

五、页面开发
根据自己的需求定制自己的页面
简单提醒：
wxml中没有<div>而是用<view>代替