微信小程序实例开发demo

1.开始一个微信小程序项目之前可以花一天时间大致了解一下官方文档的详细介绍：

微信小程序官方开发文档。

2.申请一个小程序帐号：https://mp.weixin.qq.com/wxopen/waregister?action=step1。

3.登录： 微信公众平台 

• 我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 
• 我们可以在菜单 “用户身份”程序的添加用户权限（给该用户添加相应的开发权限和体验权限等）
• 我们可以在菜单 “设置”-“开发设置”-“服务器域名”里面配置域名，以便后期接口连调。

4.准备工作做好之后就要下载微信小程序的开发工具：微信小程序开发工具下载

5.打开微信开发工具，项目>管理项目+ 新建微信小程序 

• 事先可以先创建一个文件夹用于项目目录选择比如：微信小程序demo

                                       

6.点击‘确定’按钮就生成一个微信小程序demo

                                    

7.整理之后的项目目录

                                   

• 在app.json里面配置tab菜单和一些全局的title样式（json文件不允许写注视，为了更直观，项目中记得去掉）

  {
    "pages": [
      "pages/home/home",  //第一哥显示的页面路径地址放在第一个
      "pages/my/my"
    ],
    "window": {
      "backgroundTextStyle": "light",    //全局页面背景色
      "navigationBarBackgroundColor": "#eee", //导航栏颜色
      "navigationBarTitleText": "WeChat",    //导航栏title
      "navigationBarTextStyle": "black"      //导航栏背景色
    },
    "tabBar": {
      "list": [
        {
          "pagePath": "pages/home/home",  //tab对应的页面路径地址
          "text": "首页",                 //tab菜单名称
          "iconPath": "img/home.png",     //tab图片地址
          "selectedIconPath": "img/home-hover.png" //高量状态tab图片地址
        },
        {
          "pagePath": "pages/my/my",
          "text": "我的",
          "iconPath": "img/my.png",
          "selectedIconPath": "img/my-hover.png"
        }
      ],
      "selectedColor": "#2979ff",  //高亮状态tab字体颜色
      "backgroundColor": "#fff"    //tab背景色
    }
  }

  页面效果：

•                   

7.如何设置单个页面导航栏的标题和背景颜色？

{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#eee"
}