微信小程序

开发准备

-申请小程序开发账号
-安装小程序开发工具
-创建和配置小程序项目

要先到 微信公众平台 去注册账号

我的AppID(小程序ID)：wx7266c20dc28bea8a

小程序项目的基本构成

根目录：

pages 用来存放所有小程序的页面；

utils 用来存放工具性质的模块（比如：格式化时间的自定义模块）；

app.js 小程序项目的入口文件；

app.json 小程序项目的全局配置文件；

app.wxss 小程序项目的全局样式文件；

project.config.json 项目的配置文件；

sitemap.json 用来配置小程序及其页面是否允许被微信索引;

pages文件夹：

每一个页面文件夹中通常存在：

1. .js文件（页面的脚本文件，存放页面的数据、事件处理函数等）

2. .json文件（当前页面的配置文件，配置窗口的外观、表现等）

3. .wxml文件（页面的模板结构文件）

4. .wsss文件（当前页面的样式表文件）

json 文件

Json是一种数据格式，总是以配置文件形式出现。.json配置文件可以对小程序项目进行不同级别的配置。

app.json

app.json是小程序的全局配置，包含了小程序的所有页面路径、窗口外观、界面表现、底部tab等

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/cate/cate",
    "pages/cart/cart",
    "pages/profile/profile",
    "pages/list/list"
  ],
  "window": {
    "navigationBarTitleText": "花坊",
    "navigationBarBackgroundColor": "#f3514f",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "selectedColor": "#f3514f",
    "color": "#000000",
    "backgroundColor": "#efefef",
    "position": "bottom",
    "list": [
      {
        "text":"首页",
        "pagePath": "pages/index/index",
        "iconPath": "/assets/tabbar/首页.png",
        "selectedIconPath": "/assets/tabbar/首页2.png"
      },
      {
        "text":"分类",
        "pagePath": "pages/cate/cate",
        "iconPath": "/assets/tabbar/分类.png",
        "selectedIconPath": "/assets/tabbar/分类2.png"
      },
      {
        "text":"购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "/assets/tabbar/购物车.png",
        "selectedIconPath": "/assets/tabbar/购物车2.png"
      },
      {
        "text":"我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "/assets/tabbar/我的.png",
        "selectedIconPath": "/assets/tabbar/我的2.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

代码说明：

1. entryPagePat：指定首页；

2. pages：用来记录当前小程序所有页面的路径，如果没有配置 entryPagePat 字段，则默认 pages 字段的首位为首页；

3. windows：全局定义小程序所有页面的背景色、文字颜色等；

4. dark：配置底部的导航栏。其中如果 position 的值是 top ，则导航栏在上方；页iconPath 表示为点击前的图标，selectedIconPath 表示点击后的图标；

5. style：全局定义小程序组件所使用的样式版本；

6. sitemapLocation：用来指明 sitemap.json 的位置

基础

微信开发文档

微信开发文档

微信小程序开发文档

WXML 模板

WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

常用组件

1. view （div）;

2. text （span）;

3. image （img）;

4. swiper （轮播图盒子，内部用 swiper-item 做为每一页轮播图的盒子）

WXSS 样式

WXSS和CSS的区别：

1. 新增rpx尺寸单位 CSS中需要手动进行像素单位换算，如rem WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

2. 提供了全局的样式和局部样式 项目根目录中的app.wxss会作用于所有小程序页面 局部页面的.wxss样式仅对当前页面生效

3. WXSS仅支持部分CSS选择器 .class和#id element 并集选择器、后代选择器 ::after和::before等伪类选择器

当然，要使用scss也是可以的，只需要在project.config.json文件下的“setting”字段中加上：

"useCompilerPlugins": [
  "sass"
],

即可