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

发布时间：2020-12-14 19:48:55 所属栏目：资源来源：网络整理

导读：开发微信小程序需要注册一个小程序账号，具体流程可以参照官方教程：开通账户之后，在 “开发设置” 中获取到 AppID，然后打开开发工具创建项目生成的项目结构如下：其中 project.config.json 是整个项目的配置文件，里面包含了微信（小程序基础库）版本

开发微信小程序需要注册一个小程序账号，具体流程可以参照官方教程：

开通账户之后，在 “开发设置” 中获取到 AppID，然后打开开发工具创建项目

生成的项目结构如下：

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

具体配置项可以参考

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

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

1. WXML?

微信小程序也采用了MVVM的形式，所以 WXML 实际写法更类似于 Vue

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

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

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

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

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

所以不能在 WXML 文件中直接使用等标签，而是使用

2. WXSS

可以直接写CSS样式，但是只支持部分选择器，和选择器都是不支持的

另外只有 app.wxss 中的样式是全局样式，对所有组件生效。

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

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

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

3. js

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

二者的区别在于，bind 不会阻止冒泡事件向上冒泡，catch 可以阻止冒泡事件向上冒泡

另外，bind 和 catch 后面的冒号可以省略

4. json

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

详细配置信息可以查看这里：

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

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

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

: : : : : : : : : :

这里 list 中的是页面路径，相当于路由地址

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

但图标路径，不能使用网络图片，也无法用 class 引入字体图标

?配置好的 tabBar 效果：

通过 tabBar 可以实现简单的导航跳转功能，此外还可以使用等来切换页面

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

只能跳转到没有在上配置的页面

如果需要跳转到 tabBar 配置的页面，需要使用

举个栗子~

在 pages 下新建一个页面

PS：可以在文件夹下快速创建 page 组成文件（wxml、wxss、js、json）

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

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

在三个页面中都添加一个

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

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