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

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

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

一、创建项目

创建项目的时候,建议把 AppId 填上,不然会影响部分功能的使用

 一个 AppId 可以开发多个小程序,不过发布的时候只能发布一个

生成的项目结构如下:

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

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

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

二、认识页面

微信小程序中采用 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 只对当前组件生效

三、添加 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 效果:

四、导航方法

通过 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 就能正常切换

过程如下:

微信小程序 发现之旅(一)—— 项目搭建与页面跳转的更多相关文章

  1. 微信小程序 发现之旅(二)—— 自定义组件

    组件化的项目开发中,组件应当划分为三个层次:组件.模块.页面 微信小程序已经为开发者封装好了基础组件,页面文件(pages)也有了详细的规定 而模块就需要自行开发,并且要和页面文件区分开,这就涉及到自 ...

  2. 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  3. 微信小程序 发现之旅(三)—— 组件之间的参数传递

    一.URL 传参 当使用 navigateTo() 方法跳转页面的时候,可以在 url 后面接 query 参数 然后在 Page 页面的生命周期函数 onLoad 中可以接收到这些参数 这种方式只能 ...

  4. 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2

    今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...

  5. 微信小程序开发(三)项目目录及文件结构

    第二章我们已经创建了一个Hello WXapplet示例小程序.我们从文件目录结构来了解Hello WXapplet项目的构成. 目录结构显示,在小程序项目的根目录下面包含3个app开头的文件(app ...

  6. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...

  7. 使用wepy开发微信小程序商城第二篇:路由配置和页面结构

    使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...

  8. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  9. 微信小程序(1)--新建项目

    这些天看了一下最近特别火的微信小程序,发现和vue大同小异. 新建项目 为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 q ...

随机推荐

  1. Python入门之函数的装饰器

    本章目录: 装饰器: 一.为什么要用装饰器 二.什么是装饰器 三.无参装饰器 四.装饰器语法糖 五.认证装饰器实现 六.叠加多个装饰器 七.带参装饰器 ======================== ...

  2. 清除session信息

    session.removeAttribute("sessionname")是清除SESSION里的某个属性.     session.invalidate()是让SESSION失 ...

  3. JavaScript的sleep实现--Javascript异步编程学习

    一.原始需求 最近在做百度前端技术学院的练习题,有一个练习是要求遍历一个二叉树,并且做遍历可视化即正在遍历的节点最好颜色不同 二叉树大概长这个样子: 以前序遍历为例啊, 每次访问二叉树的节点加个sle ...

  4. C语言的一些输出格式

    %e      printf()的一种输出格式 科学表示的一种浮点数 1.24==1.240000e+000     1240000==1.240000e+006                   ...

  5. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  6. JAVA_将唐诗按照古文样式输出

    1. 如有唐诗: 锄禾日当午 汗滴禾下土 谁知盘中餐 粒粒皆辛苦 要求将这首唐诗按照古文样式输出,输出格式如下: 粒谁汗锄 粒知滴禾 皆盘禾日 辛中下当 苦餐土午 public class Text ...

  7. Swing图层的应用——实现tooltip显示

    没有错是世纪前的swing. 在使用Swing的时候有个问题一直没有解决,就是Swing自带的tooltip不会跟随鼠标进行移动,而且移动到边界就会遮挡的问题.JCompoent有个createToo ...

  8. 用js来实现那些数据结构06(队列)

    其实队列跟栈有很多相似的地方,包括其中的一些方法和使用方式,只是队列使用了与栈完全不同的原则,栈是后进先出原则,而队列是先进先出(First In First Out). 一.队列    队列是一种特 ...

  9. phantomjs 开发爬虫框架

    函数 page.childframescount page.childframesname page.close page.currentframename page.deletelater page ...

  10. python数据挖掘_Json结构分析

    json是一种轻量级的数据交换格式,也可以说是一种配置文件的格式 这种格式的文件是我们在数据处理经常会遇到的 python提供内置的模块json,只需要在使用前导入即可 你可以通过帮助函数查看json ...