tarojs-plugin-platform-miniprogram

@tarojs/plugin-platform-weapp 自定义 wxml 支持，目前可主要用于支持 page-meta 和 navigation-bar，Taro 版本需大于 3.1.0

2022-09-21

• 该版本升级了对taro 3.5.X的插件支持

安装

npm i -D tarojs-plugin-platform-miniprogram
# or
pnpm add -D tarojs-plugin-platform-miniprogram
# or
yarn add -D tarojs-plugin-platform-miniprogram

配置

config/index.js 中引入 plugin

const config = {
  // ...
  plugins: ["tarojs-plugin-platform-miniprogram"],
  // ...
};

// or

const config = {
  // ...
  plugins: [
    [
      "tarojs-plugin-platform-miniprogram",
      /**
       * @type {import('tarojs-plugin-platform-miniprogram').Options}}
       */
      {
        prefix: "<page-meta></page-meta>", // or path.resolve(__dirname, './prefix.wxml')

        /**
         * @version 0.1.0
         */
        include: [
          "pages/index/index",
          "pages/logs/logs",
          new RegExp('^pages/foo'),
        ],
        exclude: []
      },
    ],
  ],
  // ...
};

修改 package.json

{
  "scripts: {
-   "build:weapp": "taro build --type weapp",
+   "build:weapp": "taro build --type miniprogram",
  }
}

使用

通用

const { page } = Taro.getCurrentinstance();

page.setData({
  pageMeta: {
    backgroundTextStyle: 'dark',
    // ...
  },
  navigationBar: {
    // ...
  },
});

React

除了通用方法外，为 React 封装了组件

import { PageMeta, NavigationBar } from "tarojs-plugin-platform-miniprogram/dist/components";

export default () => {
  return (
    <>
      <PageMeta backgroundTextStyle='dark'>
        <NavigationBar title='Awesome Taro' />
      </PageMeta>
    </>
  )
}