微信小程序 新手入门教程

因为工作需要，最近学习了一下微信小程序，在此分享一下大概的流程。

强烈建议大家先去看微信小程序简易教程：点我进入

起步：

　　安装微信web开发软件者工具，需要破解的同学可以网上找破解教程，很简单的，这里就不多说了。

　　打开微信小程序开发工具，扫码之后就能进入一下界面

　　　

　　这时候你可以在电脑上创建一个文件夹，选择添加项目，选择你之前创建的文件夹，将快速启动勾上（开发工具会生成一个项目模板），

AppID为申请小程序时候的appID,若还没有申请就选择下面的无AppID，不过项目预览功能会受限。

　　

　　确认知道便可以开始做您的项目了。

项目结构：

　　

　　项目的目录结构如图，.json为配置文件，pages下面为各个页面，每个页面包括4个文件（.js, .wxml, .wxss, .json）,其中子页面下的json文件不是必须的，如果需要自己新建一个。

其实和普通web项目差不多。app.json为项目启动配置（必须要有的）。

json配置项：

　　

　　　　官网写得很详细，仔细看！！点我进去

　　　　这里重点讲下tarBar(底部导航),在app.json里面配置，最多能配置5个导航，可以使用图标或者文字以及图标文字组合的方式。(text为导航文字，pagePath为跳转的页面,iconPath为图标的地址,selectIconPath为激活状态的图标样式，如果不填写则是空白的)。

 "tabBar":{
    "color":"#7a7a7a",
    "selectedColor": "#000",
    "list":[{
      "text":"首页",
      "pagePath":"pages/index/index",
      "iconPath":"images/icon/index_home.png",
      "selectedIconPath":"images/icon/index_home_hover.png"
    },
    {
      "text": "信息",
      "pagePath": "pages/publicInfo/publicInfo",
      "iconPath": "images/icon/index_info.png",
      "selectedIconPath": "images/icon/index_info_hover.png"
    },
    {
      "text": "课程",
      "pagePath": "pages/courseIndex/courseIndex",
      "iconPath": "images/icon/index_course.png",
      "selectedIconPath": "images/icon/index_course_hover.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/mine/mine",
      "iconPath": "images/icon/index_mine.png",
      "selectedIconPath": "images/icon/index_mine_hover.png"
    }]

配置window：

　　

　　

　　app.json配置的window是全局作用的，将设为每个子页面默认的样式，如果每个页面不同，则可以给每个子页面加上json文件，配置window，需要注意一点的事，子页面配置window不需要在外面写window，直接写里面的属性就行了

　　

　　

注意：

　　1.微信小程序提供了作用域的结构，app.wxss为全局设置的css，里面的子页面都能使用这个wxss里的样式，里面每个页面也可以单独写自己的wxss,可以覆盖app.wxss里面的样式，但是不会影响其他页面。（建议wxss使用flex布局，推荐阮一峰大大的讲解 点此进入flex布局）

　　2.多个带有数字中文的盒子（view或者text）不能垂直居中对齐，若只有一行建议设置高度用行高控制， 若不是一行，只有写入同一个盒子里。

　　3.设置背景图片时，背景图片不能使用本地图片，只能是服务器上的。

微信小程序提供了渲染数据的方法以及各种接口，具体的请大家自己去看看 组件 API。