background

Recently, new pages need to be added on the original small program. Meanwhile, relevant pages may need to support H5 access in the future. In addition, I am not familiar with the development of small programs. Read the documents of the small program, the code writing of the small program is not quite adapted to. After comparing the current popular mixed development framework, Taro was selected to carry out the subsequent function development of the small program.

The official documentation

Refer to the official Taro documentation to find the following relevant documents:

  • Taro code mixed with small program code
  • Wechat mini program to Taro

Try one: original small program to Taro

At first, I was misled by the document of transferring Taro from wechat mini program. I chose to convert the existing code into Taro code using the Taro convert command, and then put it into the SRC directory of the new project. After debugging, it was found that the original project referenced weui components. Taro compiled the project, but could not find the relevant components. The reason is that weUI components have already been packaged with Webpack once, not standard Module, repackaged naturally cannot be found.

Weui can not support non-wechat platform, the existing WeUI will definitely be killed in the future, however, I only use the small program at present, need to run the existing project first. You have to use the second option, which is to mix the two codes.

Mixed with applets code

Look at the official documentation. It’s so simple. His example:

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

class App extends Component {

  config = {
    pages: [
      'pages/index/index'.'pages/wxParse/wxParse'.'pages/echarts/echarts'.'pages/native/native'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'}}componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  componentCatchError () {}

  render () {
    return (
      <Index />
    )
  }
}

Taro.render(<App />, document.getElementById('app'))
Copy the code

I need to migrate the App related code from the original applet code, and then the entry page is the old page. The render method in the App is used to import objects from the old page.

After looking at the code after scheme 1 convert, I found that the render in App can completely return NULL

@downloadp ({globalData: {XXX :null}, onLaunch:function () {
        console.log('[APP]Old onLaunch'); }, // exposed to wechat code using store}) class App extends Taro.Component {config = {pages: [//'pages-taro/test/index'."pages/xxx/xxx"."pages/xxx/xxx2".'pages-taro/xxx/xxx'
        ],
        tabBar: {
            color: '# 656565',
            selectedColor: '#FF4344',
            list: [
                {
                    pagePath: 'pages/xxx/xxx',
                    iconPath: './statics/img/home1.png',
                    selectedIconPath: './statics/img/home2.png',
                    text: 'home'
                },
                {
                    pagePath: 'pages/xxx/xxx',
                    iconPath: './statics/img/user1.png',
                    selectedIconPath: './statics/img/user2.png',
                    text: 'I'
                }
            ]
        },
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'WeChat',
            navigationBarTextStyle: 'black'
        },
        style: 'v2',
        sitemapLocation: 'sitemap.json'
    };

    render() {
        return null;
    }
} //app.js

Taro.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app'));Copy the code

Small program source code directly to the SRC directory below, you can.

After running, it is found that the image below statics is missing.

Modify config/index.js file to add configuration section:


    copy: {
        patterns: [
            {
                from: 'src/statics/img/',
                to: 'dist/statics/img/'
            },
            {
                from: 'sitemap.json',
                to: 'dist/sitemap.json'}}]Copy the code

Copy images from Statics/IMG by default. When developing with Taro, place images in another folder and import them to prevent unnecessary images from being introduced.

For now, the old applet can still be used, or you can call getApp().store using redux under Taro.