微信小程序开发-快捷键、标签

格式调整

界面相关

分割线

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

redirectTo ：关闭当前页(卸载)，跳转到指定页

navigateTo ：保留当前页(隐藏)，跳转到指定页

switchTap ：只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换

注意:switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面！

list页面:

detail页面:

eventtarget指的是当前点击的组件

eventcurrentTarget指的是事件捕获的组件

bindchange 这个事件官方文档中没有写，效果基本和 bindblur 一样，但失去焦点时不会被重复触发，所以一般还是采用 bindblur

小程序对于全局 wxss 组件的继承只能继承 font 以及 color 类型

bind事件绑定不会阻止冒泡事件，而catch会阻止冒泡事件，看官方文档有介绍

在指定的css属性最后带上 ! important 能够加强属性的优先级

wxs 只是与 JavaScript 相似，并非 JavaScript ，所以无法定义 const 常量，得用 var

wxs 存在的意义就是充当 compute/filter 这类功能。

且当使用 wxs 进行数据绑定时，要注意 setData 出来的数据的二次读取，

因为 setData 之前首先会进行一次初始化

wxs编写 :

wxml使用 :

关于 thisdata 与 thissetData 的使用细节

thisdata 使用于同步 *** 作(如 onLoad 加载)，而 thissetData 适用于异步 *** 作(如 wxrequest )

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上 *** 作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。

首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logsjs 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。

这个数据模型的值填充，通过微信框架提供的 API wxgetStorageSync 来获取。

wxgetStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。

我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 indexjs 里的实现：

跳转还是通过微信小程序提供的 API wxnavigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wxnavigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationServicegetGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意 *** 作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会d出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。

>

微信小程序针对于协议这一块， 为了安全起见的话，必须提供>

微信小程序的虚拟定位功能可以通过模拟GPS信号实现，具体步骤如下：

1 打开微信小程序，进入需要进行虚拟定位的页面。

2 在微信小程序页面中，点击屏幕右上角的“”按钮，打开小程序菜单。

3 在小程序菜单中，找到“开发者工具”选项，并点击进入开发者工具界面。

4 在开发者工具中，找到左侧菜单栏中的“调试”选项，并点击进入调试页面。

5 在调试页面中，找到右上角的“位置模拟”按钮，并点击打开位置模拟窗口。

6 在位置模拟窗口中，输入需要模拟的经度、纬度、高度等信息，并点击“添加位置”按钮。您可以添加多个模拟位置，以模拟移动轨迹。

7 在位置模拟窗口中，勾选“开启位置模拟”选项，然后点击“确定”按钮保存设置。

8 返回微信小程序页面，刷新页面即可看到虚拟定位的效果。

需要注意的是，在使用虚拟定位功能时，可能会影响小程序的正常使用，建议仅在开发和测试阶段使用。同时，虚拟定位功能需要在微信开发者工具中进行设置，实际上线时无法使用虚拟定位功能。

以上就是关于微信小程序开发-快捷键、标签全部的内容，包括:微信小程序开发-快捷键、标签、关于微信小程序的一些要点、微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/10097873.html