【原创】创建微信小程序并接入阿里云平台（一）

自述

因个人需要初次尝试制作微信小程序，并将后台接入阿里云，学习过程根据网上教学，可能内容不是特别准确，但以此记录下学习步骤，方便大家日后参考。（初次写博客，排版如有不到位的地方请在评论区指出）

作品需求

能够将阿里云数据库中实时更新的信息通过后台传至小程序前端中显示，方便工作人员查看相关信息。

正文内容

• 注册拥有小程序
  进入微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
  
  再按照相关指示申请账号即可。注意：每个邮箱仅能申请一个小程序。最终得到自己的 APP ID和APP Secret(后续经常使用,建议另外用记事本等保存起来)

• 下载微信开发者工具
  
  根据自己的系统安装最新的稳定版即可。
  
  打开下载包，选择自己需要安装的位置，点击“安装”即可。

  
  桌面生成快捷图标，点击进入，显示如上界面即安装成功，登录即可开始制作小程序。

• 创建小程序项目
  登录微信开发者工具 - 新建小程序 - 修改项目名称及目录（也可用默认）- 填入刚才得到的 APPID（小程序-开发-开发设置-APPID）- 不使用云服务-新建
  
  
  创建好项目后即可开始写自己的代码了，具体像“backgroundTextStyle”这些，可以在 小程序 - 框架/组件（如下图） 中查找，这里就不过多解释了。
  
  -代码编写
  这里简单修改一下“helloword”项目，修改标题、颜色，增加三个tab，并给tab添加相应图标。

  图标使用推荐网址：https://www.iconfont.cn/
  这里补充一下对所需图标下载及引用方式：先找到自己之前创建的项目文件夹，我的是C:\Users\JL\WeChatProjects\miniprogram-1，在文件夹中新建一个image文件夹来存放之后下载的图标。在上述网站中选择所需图标，选择 下载-PNG下载 -image文件夹

  具体如图示
  
  
  
  仅修改了app.json的代码，其他还是原hellow，app.json修改后如下

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ecc",
    "navigationBarTitleText": "5G物流云平台",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",

  "tabBar": {
    "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页" ,
      "iconPath": "image/index.png",
      "selectedIconPath": "image/index active.png"

    },
    {
      "pagePath": "pages/index/index",
      "text": "物流信息实况",
      "iconPath": "image/logistics.png",
      "selectedIconPath": "image/logistics (1).png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "无人机状况",
      "iconPath": "image/UAV 无人机.png",
      "selectedIconPath": "image/UAV.png"
    }
  ]
  }
}

效果图

注意：iconPath是未点击前的图标；selectedIconPath是点击后的图标。