微信小程序 发现之旅（一）—— 项目搭建与页面跳转

开发微信小程序须要注册一个小程序帐号，具体流程能够参照官方教程：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

开通帐户以后，在 “开发设置” 中获取到 AppID，而后打开开发工具建立项目

 

1、建立项目

 建立项目的时候，建议把 AppId 填上，否则会影响部分功能的使用

 一个 AppId 能够开发多个小程序，不过发布的时候只能发布一个

 

生成的项目结构以下：

其中 project.config.json 是整个项目的配置文件，里面包含了微信（小程序基础库）版本、appid 等信息

具体配置项能够参考 https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

utils 文件夹用于存放一些公用脚本，pages 文件夹存放页面文件，app.js、app.json、app.wxss 构成程序主体

 

2、认识页面

微信小程序中采用 WXML + WXSS + JS + JSON 的方式渲染页面

 

1. WXML  网页模板，用于编译小程序的 html 部分

微信小程序也采用了MVVM的形式，因此 WXML 实际写法更相似于 Vue

好比常见的用 {{ }} 绑定数据

// 基础绑定
<view> {{ message }} </view>

// 组件属性
<view id="item-{{id}}"> </view>

// 控制属性
<view wx:if="{{condition}}"> </view>

WXML 还能够实现列表渲染、自定义模板，详情能够查看文档中关于WXML的介绍

须要留意的是，小程序底层将 html 元素都封装成了组件

因此不能在 WXML 文件中直接使用 div、p、span 等标签，而是使用组件

 

2. WXSS 样式语言，基于CSS扩展

能够直接写CSS样式，可是只支持部分选择器，好比 * 和 > 选择器都是不支持的（如今都能支持了）

另外只有 app.wxss 中的样式是全局样式，对全部组件生效。pages 目录下的 wxss 仅对当前组件生效

WXSS 中还新增了尺寸单位 rpx，并规定屏幕宽度固定为750rpx

因此在宽度为 750px 的设计稿中，1rpx = 750/750 = 1px，

若是是宽度为 640px 的设计稿，1rpx = 750/640 = 1.17px

 

3. js 还须要解释么

微信小程序中没有再对 js 进行扩展，只是在触发事件的时候，分为 bind 和 catch 两种形式

<view id="outer" bind:tap="handleTap1">
  outer view
  <view id="middle" catch:tap="handleTap2">
    middle view
    <view id="inner" bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

两者的区别在于，bind 不会阻止冒泡事件向上冒泡，catch 能够阻止冒泡事件向上冒泡

另外，bind 和 catch 后面的冒号能够省略

 

4. json 页面配置文件

app.json 是小程序的全局配置文件，包括了小程序的全部页面路径、界面表现等

详细配置信息能够查看这里：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

pages 目录下的 json 文件和 app.json 相似，可是 page.json 只对当前组件生效

 

3、添加 tabBar

app.json 中有一个配置项 tabBar，能够经过它生成 tab 栏，具体的文档以下：

建立项目时生成的快速模板，包含“首页”和“日志”两个页面，其对应的 tabBar 能够这么写：

"tabBar": {
    "selectedColor": "#1296db",
    "borderStyle": "#e4e4e4",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "assets/homepage.png",
        "selectedIconPath": "assets/homepage_fill.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "assets/order.png",
        "selectedIconPath": "assets/order_fill.png",
        "text": "日志"
      }
    ]
  }

这里 list 中的 pagepath 是页面路径，至关于路由地址

iconPath 和 selectedIconPath 指的是对应的图标路径

但图标路径只能是本地图片路径，不能使用网络图片，也没法用 class 引入字体图标

 配置好的 tabBar 效果：

 

4、导航方法

经过 tabBar 能够实现简单的导航跳转功能，此外还可使用 wx.navigateTo、wx.switchTab 等导航方法来切换页面

若是已经设置了 tabBar，那么在使用这些导航方法的时候，须要注意一些细节：

wx.navigateTo 只能跳转到没有在 tabBar 上配置的页面

若是须要跳转到 tabBar 配置的页面，须要使用 wx.switchTab

 

举个栗子~

在 pages 下新建一个页面

PS：能够在文件夹下快速建立 page 组成文件（wxml、wxss、js、json）

这下就有了 index、 logs、flash 三个页面

其中 index 和 logs 已经在 tabBar 中的 list 添加了路径，而 flash 没有被添加，因此 tabBar 只有“首页”和“日志”

在三个页面中都添加一个 <button>

 

并添加对应的事件处理函数

若是全部的页面都使用 wx.navigateTo 方法的话，

当 url: '/pages/index/index' 或者 url: '/pages/logs/logs'

没法正常切换页面

而 url: '/pages/flash/flash' 能正常切换

这时只要在跳转到“首页”和“日志”的方法中，使用 wx.switchTab 就能正常切换

过程以下：