微信小程序【1】

申请小程序账号

'微信公众平台’注册。然后登录点击设置找到APPID，记录一下，后面有用。

开发准备

微信小程序官网：https://mp.weixin.qq.com/cgi-bin/wx
开发模块：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
开发工具下载地址

开发工具界面介绍

小程序项目是用于开发时使用的，公众号网页项目是用于调试用的

小程序demo

微信小程序开发框架

wxml-html wxss-css
编译按钮就是保存

全局配置文件app.json

{
	//页面路径，可以跳转的
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //关于顶部的一些配置
  "window":{
  //下拉刷新时三个点的动画效果
    "backgroundTextStyle":"dark",
    //顶部背景颜色
    "navigationBarBackgroundColor": "#000",
    //顶部文字
    "navigationBarTitleText": "微信",
    //文字颜色
    "navigationBarTextStyle":"white",
    //是否有下拉效果
    "enablePullDownRefresh": true,
    //下拉后的背景颜色
    "backgroundColor": "#ddd"
  },
  "style": "v2",
  //微信站内搜索配置
  "sitemapLocation": "sitemap.json",
  //底部切换栏
  "tabBar": {
  //分割线的颜色
    "borderStyle": "black",
    //选择文字的颜色
    "selectedColor": "#f30",
    //配置有几个切换栏，至少要2个，最多5个
    "list": [{
    //切换的路径
      "pagePath": "pages/index/index",
      //底部显示的文字
      "text": "首页",
      //为选中的图标
      "iconPath": "/images/icon_1.png",
      //选中的图标
      "selectedIconPath": "/images/icon_11.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "/images/icon_2.png",
      "selectedIconPath": "/images/icon_22.png"
    }
    ]
  }
}

效果图