1、小程序底部适配ios
wx.getSystemInfo({
success: res => {
let { screenHeight, safeArea: { bottom } } = res
/* ios安全底部 */
this.globalData.safeArea = screenHeight - bottom
}
})
2、百度地图转腾讯
const mapChange = data => {
let { lngs,lat} = data
let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
let x = lngs - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lng = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {la:lats,lg:lng}
}
3、canvas 绘制海报
4、自定义底部tabbar，中间凸起
创建一个组件 custom-tab-bar
HTML
<view class="tab-bar">
<view class="tab-bar-border"></view>
<block wx:for="{
{list}}" wx:key="index">
<view wx:if="{
{item.isSpecial}}" class="tab-bar-item" data-name="{
{item.text}}" data-path="{
{item.pagePath}}" data-click="{
{ item.isSpecial || false }}" data-index="{
{index}}" bindtap="switchTab">
<view class="special-image">
<image class="special-image-pic" mode="widthFix" src="{
{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
</view>
<view style="color: {
{selected === index ? selectedColor : color}}" class="special-text tab-text">{
{item.text}}</view>
</view>
<view wx:else class="tab-bar-item" data-name="{
{item.text}}" data-path="{
{item.pagePath}}" data-click="{
{ item.isSpecial }}" data-index="{
{index}}" bindtap="switchTab">
<image class="item-image" mode="widthFix" src="{
{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="tab-text" style="color: {
{selected === index ? selectedColor : color}}">{
{item.text}}</view>
<view class="num" wx:if="{
{item.text == '消息' && message_num != 0}}">{
{message_num}}</view>
</view>
</block>
<page-container show="{
{show}}" round="true" bind:beforeenter="beforeenter">
<release userPosition="{
{user_position}}" bind:updataStatus="btnClick"></release>
</page-container>
</view>
CSS**
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 96rpx;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.num{
background-color: #D32F35;
min-width: 40rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
position: absolute;
right: 15rpx;
top: 0;
color: #fff;
font-size: 24rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
box-sizing: border-box;
padding: 0 5rpx;
}
.tab-bar-item .item-image {
width: 36rpx;
height: 36rpx;
}
.tab-bar-item .special-image {
position: absolute;
top: -36rpx;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
.tab-bar-item .special-image .special-image-pic {
width: 100%;
height: 100%;
}
.tab-bar-item .tab-text {
margin-top: 4rpx;
font-weight: bold;
}
.tab-bar-item .special-text {
margin-top: 44rpx
}
.tab-bar-item .tab-text {
font-size: 10px;
}
JS
Component({
data: {
/* 发布弹框 */
show: false,
/* 已选择tab */
selected: 0,
message_num: 0,
/* 未选择颜色 */
color: "#6E7277",
/* 已选择颜色 */
selectedColor: "#D32F35",
/* 当前用户的权限 */
user_position: '',
list: [
{
pagePath: "/pages/index/index",
iconPath: '../assets/image/home.png',
selectedIconPath: '../assets/image/home-active.png',
text: "首页"
},
{
pagePath: "/pages/contact/index",
iconPath: '../assets/image/contact.png',
selectedIconPath: '../assets/image/contact-active.png',
text: "通讯录",
},
{
pagePath: "",
iconPath: '../assets/image/release.png',
selectedIconPath: '../assets/image/release.png',
text: "发布",
isSpecial: true
},
{
pagePath: "/pages/news/index",
iconPath: '../assets/image/news.png',
selectedIconPath: '../assets/image/news-active.png',
text: "消息",
},
{
pagePath: "/pages/personal/index",
iconPath: '../assets/image/personal.png',
selectedIconPath: '../assets/image/personal-active.png',
text: "我的"
}
]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.reLaunch({url})
this.setData({
selected: data.index
})
}
},
beforeenter(){
this.setData({
user_position: wx.getStorageSync('user_info').userPosition
})
},
btnClick() {
this.setData({
show:false
})
}
},
})
**```
在app.js中添加跳转逻辑**
/* 自定义底部按钮切换 */
getCurrentTabbar(selected, that) {
if (typeof that.getTabBar === ‘function’ &&
that.getTabBar()) {
if (wx.getStorageSync(‘openid’)) {
msg_unread().then(res => {
that.getTabBar().setData({
selected: selected,
message_num: res.data.data
})
})
} else{
that.getTabBar().setData({
selected: selected
})
}
}
},
**app.json**
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/contact/index",
"text": "通讯录"
},
{
"pagePath": "pages/logs/logs",
"text": "发布"
},
{
"pagePath": "pages/news/index",
"text": "消息"
},
{
"pagePath": "pages/personal/index",
"text": "我的"
}
]
},
最后在所需页面onshow中添加 **app.getCurrentTabbar(0,this);**用于显示那个亮起与否
**5、倒计时，公用组件**
HTML
JS
Component({
behaviors: [],
properties: {
// 父组件给子组件传递参数
time:{
type: String,
value: “”
}
},
data: {
countdown: ‘’, //倒计时
days: ‘00’, //天
hours: ‘00’, //时
minutes: ‘00’, //分
seconds: ‘00’, //秒
timer: ‘’
},
created() {
this.data.timer = setInterval(()=>this.countTime(),1000)
},
methods: {
countTime() {
let days,hours, minutes, seconds;
let that = this;
let nowDate = that.data.time.replace(/-/g, “/”);
let now = new Date().getTime();
let end = new Date(nowDate).getTime(); //设置截止时间
let leftTime = end - now; //时间差
if (leftTime >= 0) {
days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
minutes = Math.floor(leftTime / 1000 / 60 % 60);
seconds = Math.floor(leftTime / 1000 % 60);
seconds = seconds < 10 ? “0” + seconds : seconds
minutes = minutes < 10 ? “0” + minutes : minutes
hours = hours < 10 ? “0” + hours : hours
that.setData({
countdown: days+“:”+hours + “：” + minutes + “：” + seconds,
days,
hours,
minutes,
seconds
})
} else {
that.setData({
countdown: ‘已截止’
})
this.handleClearTime()
}
},
handleClearTime(){
clearInterval(this.data.timer);
}
}
});
css
.tui-conutdown-box {
display: inline-block;
text-align: center;
background-color: rgba(211, 47, 53, .1);
color: #D32F35;
font-size: 40rpx;
margin: 0 4rpx;
min-width: 57rpx;
height: 57rpx;
line-height: 57rpx;
}
.tui-countdown-bg {
background-color: #DF0101;
}
.countdown-text{
color: #010F37;
font-size: 32rpx;
margin: 0 11rpx;
}
**6、封装请求**
创建一个https.js文件，用于管理请求地址
/* let baseUrl = ‘http://192.168.1.110:8089/’; */
let baseUrl = ‘https://sc.ziicoo.cn:446/mjapi/’;
export {
baseUrl
}
创建一个request.js文件
import { baseUrl } from ‘./http.js’
module.exports = {
request : function(url, methodType, data){
let fullUrl = ${baseUrl}${url}
wx.showLoading({ title: “数据请求中” });
return new Promise((resolve,reject) => {
wx.request({
url: fullUrl,
method: methodType,
data:data,
header: {
‘content-type’: ‘application/json’, // 默认值
// ‘x-api-key’: token,
},
success(res){
wx.hideLoading()
if (res.data.code == 200) {
resolve(res)
} else if ( res.data.code == 500) {
wx.showToast({
title: res.data.msg,
icon:‘none’
})
}
},
fail(){
wx.hideLoading()
wx.showToast({
title: ‘接口请求错误’,
icon:‘none’
})
reject(‘接口请求错误’)
}
})
})
}
}
创建单个请求js文件，统一输出
import { request } from ‘./request’
module.exports = {
/* 活动列表 */
list: data => request ( url, ‘GET’ ),
}
最后在所需页面直接引入改文件 import { } from ‘路径’