微信小程序基础知识——第一天

现在小程序越来越火，各大平台都有自己的小程序。微信小程序、支付宝小程序、头条小程序、抖音小程序、百度小程序等。现在我们来看下微信小程序是怎样开发的。
第一步：熟悉小程序项目文件目录，
1、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释

2、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

3、微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页

4、app.js 主要是全局公共的js方法声明及调用所在的文件

5、app.json 是小程序整个的配置文件，所有页面都在此注册，不然不能访问。会报错

6、app.wxss 是全局的css文件， 公共css写在该文件中

7、 .wxml后缀的文件是页面结构文件

8、 微信小程序是微信全新定义的规范，是基于xml+js的。不支持也不兼容HTML

image.png

第二步：熟悉app.json项目配置，底部tabbar、页面路径，项目标题，导航，字体颜色等。

"window": {
          "backgroundTextStyle" : "#000"             //下拉背景字体，loading图的样式
      "navigationBarBackgroundColor" : "red"    //导航标题背景色                
      "navigationBarTitleText": "标题",         //导航标题内容
      "navigationBarTextStyle": "#fff"         //导航标题字体颜色
      enablePullDownRefresh : false / true     //是否开启下拉刷新
  },
"tabBar": {
    "color": "#999999", //底部导航字体颜色
    "selectedColor": "#f3c04b",//底部导航选中字体颜色  
    "borderStyle": "#dcdcdc" ,   //底部导航上边线颜色
    "backgroundColor": "#f6f6f6", //底部导航背景色
    "list": [
      {
        "pagePath": "pages/home/index", //页面路径
        "iconPath": "image/tabbar/icon-1.png",//默认图标
        "selectedIconPath": "image/tabbar/icon-1-1.png",//选中当前图标
        "text": "首页"//tabbar标题
      },
      {
        "pagePath": "pages/sort/index",
        "iconPath": "image/tabbar/icon-2.png",
        "selectedIconPath": "image/tabbar/icon-2-1.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/order/index",
        "iconPath": "image/tabbar/icon-2.png",
        "selectedIconPath": "image/tabbar/icon-2-1.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "image/tabbar/icon-3.png",
        "selectedIconPath": "image/tabbar/icon-3-1.png",
        "text": "我的"
      }
    ]
  },

第三步：小程序路由

wx.switchTab  跳转到tabBar页面，并关闭其他所有非tabBar页面

wx.reLaunch   关闭所有页面，打开到应用内的某个页面

wx.redirectTo   关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面

wx.navigateTo   保留当前页面，跳转到应用内的某个页面，但是不能跳转tabbar页面。

wx.navigateBack   关闭当前页面，返回上一页面或多级页面。

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release" class="nav"></navigator>// 跳转到新的小程序

注意事项：
1、背景图片不识别，解决办法：把图片上传至服务器，把地址写在背景路径，或者把图标转换

2、底部导航栏 tabBar底部导航栏 tabBar是一个数组，只能配置最少2个、最多5个tab

3、小程序中不能和字节操作Window对象，document文档。小程序中不能和字节操作Window对象，document文档。

4、小程序脚本逻辑实在JsCore中运行，JsCore是一个没有窗口的对象环境，所以不能再脚本中使用window、zepto、jQuery。

5、样式表不支持级联选择器， WXSS支持以 . 开始的类选择器

6、tabBar的页面用switchTab进行调整， tabBar的页面用switchTab进行调整， 没有tabBar的页面用navigateTo进行调整

第一天的知识就到这了，有不明白的可以留言。