微信小程序基础(一)

微信小程序基础(一)

1. 小程序文件格式

1.1 基本文件格式

js文件: 页面逻辑-和用户做交互：响应用户的点击、获取用户的位置等等.

wxml文件: 页面结构-就是微信版html负责页面的整体结构.

json文件: 页面配置-微信小程序相关的配置,导航栏标题,背景等信息.

wxss文件: 页面样式-具有 CSS 大部分特性,扩展了尺寸单位和样式导入.

---

1.2 根文件

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.

app.wxss 是当前小程序的全局样式，会作用于当前小程序的所有页面.

app.js 是当前小程序的注册入口, 绑定生命周期回调函数、错误监听和页面不存在监听函数等

---

1.3 相关知识

• JSON语法

  JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。

  JSON的Key必须包裹在一个双引号中。

  JSON的值只能是以下几种数据格式，其他任何格式都会触发报错

  1. 数字, 包含浮点数和整数

  2. 字符串, 需要包括在双引号中

  3. 布尔值, true 或者 false

  4. 数组, 需要包括在方括号中 [ ]

  5. 对象, 需要包括在大括号中 { }

  6. Null

  注意: JSON 文件中无法使用注释，试图添加注释将会引发报错。

• WXSS 尺寸单位和样式导入

  尺寸单位 : rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

  建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

  注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
  
  
  样式导入 : 使用@import语句可以导入外联样式表，
  ​ @import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

 	@import "common.wxss";

​

• 其他内容 (注意其他内容就是微信小程序学习的重点)

  微信小程序还帮助开发者提供了对html的封装组件 如: text view 等,
  还有轮播图,地图等强大的功能组件

  ---

  微信小程序提供了数据绑定, 基于MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。
  简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，
  然后再通过一种模板语法来描述状态和界面结构的关系即可。

  ---

  微信小程序提供了丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，
  例如获取用户信息、本地存储、微信支付等

2.小程序基本操作之—tabBar

​ 对app.json做如下设置:

{
  "pages": [
    "pages/index/index",
    "pages/devices/devices",
    "pages/repair/repair",
    "pages/mine/mine",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/首页.png", 
        "selectedIconPath": "images/首页.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/devices/devices",
        "iconPath": "images/设备.png",
        "selectedIconPath": "images/设备.png",
        "text": "设备"
      },
      {
        "pagePath": "pages/repair/repair",
        "iconPath": "images/维修.png",
        "selectedIconPath": "images/维修.png",
        "text": "维修"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/我的.png",
        "selectedIconPath": "images/我的.png",
        "text": "我的"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

其中 pages 设置小程序所有的页面

windows 设置界面的顶部文字颜色等

tabBar 设置小程序最下面的切换tab

3. 小程序操作之—轮播图

页面wxml部分代码:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

页面js部分代码:

   /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      '../../images/水果1.jpg',
      '../../images/水果2.jpg',
      '../../images/水果3.jpg'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔
    duration: 1000, //滑动动画时长
    circular: true //是否采用衔接滑动
  },

这个是微信swiper组件的一个基本简单应用–轮播图.

想要实现更加复杂的轮播图可以在这个基础上按照业务需求进一步改进.

想要实现swiper更加复杂的功能也可以在这个基础上更加灵活运用.