baranwang / tarojs-plugin-platform-miniprogram

@tarojs/plugin-platform-weapp custom wxml support

tarojs-plugin-platform-miniprogram

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

安装

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>
    </>
  )
}

tarojs-plugin-platform-miniprogram's Issues

PageMeta,NavigationBar引入不生效

import { Component } from 'react'
import {connect} from "react-redux";
import Taro from "@tarojs/taro";
import { PageMeta, NavigationBar } from "tarojs-plugin-platform-miniprogram/dist/components";

import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'

@connect(({index})=>({
    index
}))
export default class Index extends Component {
    constructor (props) {
        super(props)
        this.state = {
            name:'',
        }
    }
  componentWillMount () {
// 以下方法无法正常运行
      Taro.getCurrentInstance().page.setData({
          pageMeta:{
               backgroundTextStyle:'dark',
          },
          navigationBar:{
             title:'xxx'
         }
      })
        console.info(Taro.getCurrentInstance().page);
  }
  render () {
    return (
        <>
            <PageMeta>
                <NavigationBar title='Awesome Taro' />
                xxxx
            </PageMeta>
        </>
    )
  }
}

taro版本：3.4.0
插件版本：0.1.1

taro升级到3.4.1后使用该插件会导致getEnv()返回值变为Unkown

这个插件是不是没有支持pagemeta的三个bindscrolldone、bindscroll、bindresize

在prefix.wxml中没看到上述函数

如果想支持这三个函数，该怎么改造

更新Taro版本

@tarojs/taro@"3.1.0" 版本写死的，安装新版本Taro报错

运行不起来

修改为--type miniprogram后，项目直接报错

项目使用的是taro+ts+react

如果按照文档将npm script改为--type miniprogram后项目会报“全局配置缺少 pages 字段”，
如果不修改--type，项目正常运行，但从插件里引入的PageMeta不会编译

不支持最新版taro安装

插件的taro版本写死了3.1.0，导致最新版taro安装报错，必须要加--force强制安装，麻烦修改下版本。