园中桥

Appearance

miniprogram knowledge ​

状态管理 ​

mobx-miniprogram-bindings

文档：

https://github.com/wechat-miniprogram/mobx-miniprogram-bindings

动态主题设置 ​

设置全局样式 ​

app.wxss:

page {
  --theme-color: #910893;
}

页面样式使用(**.wxss)：

.order-detail {
  color: var(--theme-color);
}

动态主题设置 ​

app.js:

App({
  globalData: {
    themeColor: '--themeColorVal: red',
    bgColor: 'green'
  }
})

页面引入globalData(**.js)：

const app = getApp()
Page({
  data: {
    themeColor: app.globalData.themeColor
  },
  onShow() {
    // 设置页面背景样式
    wx.setPageStyle({
      style: {
        background: app.globalData.bgColor
      }
    })
  },
})

页面设置顶级view标签(**.wxml):

<view style="{{ themeColor }}">
...
</view>

页面样式使用(**.wxss):

.status-wrap {
    color: var(--themeColorVal);
}

动态引入图片 ​

app.js:

App({
  globalData: {
    orderImgObj: {
      phone3x: '/assets/phone3x.png',
      phone2x: '/assets/phone2x.png'
    }
  }
})

js引入(**.js)：

Page({
  data: {
    orderImgObj: app.globalData.orderImgObj,
  }
})

页面使用图片(**.wxml):

<image webp="{{true}}" wx:if="{{ pixelRatio === 3 }}" src="{{orderImgObj.phone3x}}" />
<image webp="{{true}}" wx:else src="{{orderImgObj.phone2x}}" />

转发给好友 ​

前提：需要添加 onShareAppMessage 方法

分享方式一：

通过按钮分享

<button open-type="share" />

分享方式二：

页面右上角菜单的转发

onShareAppMessage(res) {
  // 通过按钮分享 res.from === 'button'
  return {
    title: '看，这是我分享给你的',
    path: '/pages/pageDetail/pageDetail?id='+ id, // 分享卡片打开的链接
    imageUrl: ''
  }
}

分享到朋友圈 ​

前提：需要添加 onShareTimeline 方法

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

@vant/weapp 组件响应式 ​

@vant/weapp 组件库默认样式单位为 ‌px‌，而小程序开发推荐使用 ‌rpx‌ 实现自适应布局，为统一将组件库样式从 px 转换为 rpx：

安装依赖:

npm install gulp gulp-postcss postcss-px2units --save-dev

项目根目录创建 gulpfile.js‌:

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const pxtounits = require('postcss-px2units');

gulp.task('css', function () {
  return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss'])
    .pipe(postcss([
      pxtounits({
        multiple: 2, // 换算比例：1px = 2rpx
        targetUnits: 'rpx'  // 目标单位
      })
    ]))
    .pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));
});

在 package.json 的 scripts 中添加脚本:

"build": "gulp css"

执行：

npm run build

可以看到 miniprogram_npm/@vant/weapp/ 目录下 .wxss 文件里的 px 已转为 rpx。

webview ​

webview中的h5页⾯如何跳回⼩程序？