地图并显示指定位置
效果如下：
视图
<view>
<map id="myMap"
markers="{{markers}}"
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale='12'
show-location>
</map>
</view>
显示用户当前位置
wx.getLocation
app.json
{
"permission": {
"scope.userLocation": {
"desc": "需要记录打卡时的位置信息"
}
},
"requiredPrivateInfos": [
"getLocation"
]
}
代码
async showMe() {
const res = await wx.getLocation()
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
},
wx.getLocation能返回经纬度， 把这个经纬度给map组件即可。
唤起app导航
这里的myMap是 map组件的id值。
goHome() {
const t = wx.createMapContext("myMap", this)
t.openMapApp({
"longitude": 112.8993,
"latitude": 30.40147,
"destination": "潜江市"
})
},
Page({
data: {
markers: [{ // 地图中标识的地址
// iconPath: "/images/MyLoc.png",
id: 0,
latitude: 30.707596,
longitude: 114.400307,
width: 30,
height: 40
}],
"longitude": 114.400307, // 地图中显示的地址
"latitude": 30.707596
},
goHome() {
const t = wx.createMapContext("myMap", this)
t.openMapApp({
"longitude": 112.8993,
"latitude": 30.40147,
"destination": "潜江市"
})
},
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PE2BZ-CSBYS-RX4OP-6OLD7-XIHHQ-IJF37'
});
},
onShareAppMessage(res) {
console.log(res)
return {
title: '测试转发',
path: '/pages/my?from=share' // 配置分享的页面路径，你也可以写其他的，可以写首页啊
}
},
// 朋友圈
onShareTimeline(res) {
return {
title: '测试转发到朋友圈',
query: 'test=测试&from=timeline' // 需要携带的参数, 无法自定义路径，只能是当前的分享页
}
}
})
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
data: {
markers: [{
// iconPath: "/images/MyLoc.png",
id: 0,
latitude: 30.707596,
longitude: 114.400307,
width: 30,
height: 40
}],
"longitude": 114.400307,
"latitude": 30.707596
},
goHome() {
const t = wx.createMapContext("myMap", this)
t.openMapApp({
"longitude": 112.8993,
"latitude": 30.40147,
"destination": "潜江市"
})
},
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'PE2BZ-CSBYS-RX4OP-6OLD7-XIHHQ-IJF37'
});
}
})
微信转发分享
Page({
// 转发
onShareAppMessage(res) {
console.log(res)
return {
title: '测试转发',
path: '/pages/my?from=share' // 配置分享的页面路径，你也可以写其他的，可以写首页啊
}
},
// 朋友圈
onShareTimeline(res) {
return {
title: '测试转发到朋友圈',
query: 'test=测试&from=timeline' // 需要携带的参数, 无法自定义路径，只能是当前的分享页
}
}
})
Vant组件库—样式改写之暴力覆盖
目标
掌握重写覆盖第三方组件库样式的方式。
思考
如何给左边的删除按钮加上样式让其变成跟设计图一样
样式覆盖
Vant 组件中的组件提供了非常整齐美观的样式，但是开发中在所难免需要对原有样式进行个修改，官方介绍了3种方式来覆盖原来的样式：
- 简单粗暴型。通过调试工具查找要修改样式的盒子，找到已定义的类名，然后强制覆盖原有的样式
.van-swipe-cell__right {
display: flex;
justify-content: center;
align-items: center;
width: 65px;
background: red;
color: #fff;
}
这种方式能生效，还需要组件的options里面设置了styleIsolation为apply-shared或shared，或者设置了addGlobalClass: true。Vant的所有组件都设置了addGlobalClass: true。
Vant组件库-样式覆盖-外部样式类
Vant 大部分组件都支持 custom-class 来指定一个类名，通过这个类名来修改组件根节点的样式。
理解： 组件最终会生成dom节点； 组件允许我们传入一个自定义的类名，这个类名会最终出现在dom节点上。
步骤
1在组件上设置custom-class
<组件 custom-class=”自定义的类名”> </组件>
2在.wxss中设置样式
.自定义的类名 {
你的样式: !important;
}
提示：在进行样式覆盖时优先不够的情况下使用 !important
- 通过外部样式类。
.my-swipe-cell {
margin-bottom: 20rpx;
margin-right: 30rpx;
}
.my-cell-group {
margin-right: 0 !important; // 通过!important增加优先级
}
<van-swipe-cell custom-class="my-swipe-cell" right-width="{{ 65 }}">
<van-cell-group custom-class="my-cell-group" inset>
<van-cell title="北京富力家园" value="审核通过" />
<van-cell title="房间号" value="1号楼1单元101室" border="{{ false }}" />
<van-cell title="业主" value="续集号" border="{{ false }}" />
</van-cell-group>
<view slot="right">删除</view>
</van-swipe-cell>
css变量
目标
掌握css变量
css支持变量定义
思考
在审查vant组件元素的样式时，margin: var(–cell-group-inset-padding, 0 16px)是做什么的？
css变量语法
定义变量
格式：
–变量名: 变量值；
变量名前面要加两根连词线–，变量名大小写敏感
例如：
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-color: var(--main-color);
使用
选择器 {
属性名：var (–变量名);
}
var函数
var()函数用于读取变量，可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
示例1： 全局变量
--my-custom-color: pink; // 变量声明
:root{ --my-custom-color: pink;}
.box1 {
backgound-color: var(--my-custom-color); //变量使用
}
.box2 {
backgound-color: var(--my-custom-color); //变量使用
}
示例2：变量作用域
.box1 {
--my-custom-color: pink; // 变量声明
backgound-color: var(--my-custom-color); //变量使用
}
.box2 {
backgound-color: var(--my-custom-color); //变量使用
}
上述代码中定义的变量只能用在 .box 盒子及后代元素上，如果希望整个页面都能使用这个变量，可以这样定义：
page { // 小程序上， 小程序上page是页面根元素，所以放到page下，所有其它元素都可以使用
--my-custom-color: pink;
}
web开发时，可以放到:root下，如:root{ –my-custom-color: pink;}，则其它元素上都可以使用。
小结
- web开发时，全局变量可以定义在：root{}内部
- 在小程序开发时，css变量定义在page{}内部。
- 定义变量：通过–变量名。
- 使用变量：通过var(变量名)去使用，var函数还可以传入第二个参数表示默认值。
- 变量的作用域是定义的盒子及其后代元素。
vant组件库-样式覆盖-css变量
通过修改css变量的方式，可以整体设置组件库的风格。
框架接口—Behavior
目标
掌握Behavior的使用
Behavior
类似 Vue 的 mixin 的功能，能够将一些公共的逻辑抽离到单独的模块当中。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior
参考代码
// pages/index/my-behavior.js
// 注册一个 behavior
export default Behavior({
// 定义初始数据：与 Page 中定义的 data 含义一致
data: {
version: 'v1.0.0'
},
// 定义方法：与 Page 中定义方法含义一致
methods: {
getVersion() {
return this.data.version
}
}
})
上述代码在 data 中初始了一个数据 version，在 methods 中定义了一个方法 getVersion，接下来将这个 Behavior 对象注入到页面中，在页面中就能够调用 this.getVersion() 就可以获取 version 对应的数据了：
// pages/index/index.js
import myBehavior from './my-behavior'
Page({
// 将 myBehavior 注入到页面当中
behaviors: [myBehavior],
onLoad() {
// 该方法来自于 myBehavior 当中
this.getVersion()
// 可以访问到在 myBehavior 中初始的数据
console.log(this.data.version)
}
})
在 Page 中通过 behaviors 来注入 Behavior 对象，这样 Behavior 中定义的数据就可以在页面中使用了。
官方文档参考：
developers.weixin.qq.com/miniprogram…
developers.weixin.qq.com/miniprogram…
小结
Behavior就是小程序的mixin。
内置api-路由相关1
目标
掌握路由相关api
不像vue中的路由那么复杂(嵌套路由)
路由
就是简单的地址跳转，但是跳转的方式很多。
<navigator open-type="navigate">普通跳转</navigator>
<navigator open-type="redirect">重定向</navigator>
重定向时，会替换当前的数组中的记录。
示例
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/page1/page1",
"pages/page2/page2",
"pages/page3/page3"
],
每个页面上都写代码
<!--pages/page2/page2.wxml-->
<text>pages/page2/page2.wxml</text>
<navigator open-type="navigate" url="/pages/page3/page3">普通跳转page3</navigator>
<navigator open-type="redirect" url="/pages/page3/page3">重定向跳转page3</navigator>
onShow() {
const res = getCurrentPages()
console.log('page2', res)
},
重定向跳转page3
如果一个页面被设置为tabBar的页面，就不能通过navigate方式跳转
重定向跳转page3
reLaunch会清空页面记录，它没有返回操作了。
WeiXin Script—wxs
目标
了解wxs原理并且掌握其基本使用
简介
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
- WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。wxs语法参考
- WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
- 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
基础使用
WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内
内嵌
<wxs module="filter">
function toUpperCase(str) {
return str[0].toUpperCase() + str.slice(1)
}
module.exports = {
toUpperCase: toUpperCase
}
</wxs>
<text>pages/test/index.wxml</text>
<view>
{{filter.toUpperCase(msg)}}
</view>
单独文件
<wxs module="filter" src="./filter.wxs"></wxs>
<text>pages/test/index.wxml</text>
<view>
{{filter.toUpperCase(msg)}}
</view>
function toUpperCase(str) {
return str[0].toUpperCase() + str.slice(1);
}
module.exports = {
toUpperCase: toUpperCase,
};
应用场景
-
方便构建页面（过滤器）
-
响应事件（提升性能）
响应事件提升性能案例：
背景
有频繁用户交互的效果在小程序上表现是比较卡顿的，例如页面有 2 个元素 A 和 B，用户在 A 上做 touchmove 手 势，要求 B 也跟随移动，movable-view 就是一个典型的例子。一次 touchmove 事件的响应过程为：
a、touchmove 事件从视图层（Webview）抛到逻辑层
b、逻辑层处理 touchmove 事件，再通过 setData 来改变 B 的位置
一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。
实现思路
基本的思路是减少通信的次数，让事件在视图层（Webview）响应。详情参考：wxs响应事件
