Baidu small program open for more than half a year, as most developers, you must be according to the official documents of small program, with components and API, a set of code released online. In most people’s minds, there will be such a question: I have wechat small program, can use the existing code to quickly develop or generate Baidu small program? Baidu small program, wechat small program, payment small program, XX small program and so on, there is no unified framework, a development, multi-platform operation? The following from the development of Baidu small procedures, to bring unconventional suggestions.

Based on this diagram, we divide it into different development scenarios:

According to this figure, we can see, for the existing micro channel small program, we can move tools to quickly generate Baidu small program, appropriate secondary development modification joint transfer to release online Baidu small program; We can also use the applets application layer framework to do cross-platform things.

Move tool

Moving tool is for the use of native micro channel grammar development micro channel small program, generate Baidu small program code.

Moving tool, is based on the Abstract Syntax Tree development of auxiliary tools, can help you put the micro channel small program part of the code migration to Baidu intelligent small program. The tool can carry out static grammar conversion, according to some rules to convert the code, erase the differences between wechat small program grammar and Baidu intelligent small program grammar, for everyone to reduce the distress caused by platform differences. One thing to note: tools do not clean up the run-time diff, nor do they create an API from scratch. So, you have to do some secondary development, based on the transformation log. Moving tool official document moving tool NPM document moving tool analysis

Application layer framework development

In addition to the common development mode of native applet syntax, the development of applets can also be applied layer framework development, using modern framework (VUE/React) syntax to develop applets, improve development experience and solve cross-platform problems. Below we use 4 framework examples, mainly explain how to use common small program framework development Baidu small program.

Taro

Step 1: Install the development tools

Install the Taro development tool @tarojs/cli; It can be obtained using NPM or YARN, or directly using NPX (under NPM 5.2+).

	$ npm install -g @tarojs/cli
	$ yarn global add @tarojs/cli

Copy the code

Step 2: Initialize the project

Create a template project using the command

	$ taro init swan-taro
Copy the code

Taro can also refer to the development of baidu small program example

Step 3: Install dependencies

Go to the project directory and install the dependencies

	$ npm install
Copy the code

Step 4: Build the object code

Note: Remove — Watch will not listen for file changes and will compress and package the code

	# npm script$NPM run dev:swan $NPM run build:swan $NPM run dev:swan# Global install only
	$ taro build --type swan --watch
	$ taro build --type swan
Copy the code

Step 5: Developer tools preview

You can preview the project in the Developer tool by selecting dist directory under the project directory in Baidu Developer Tool.

Tips & document

  • Taro to develop baidu small program
  • Official Documents:

mpvue

Step 1: Initialize the project

Example projects to use:

	$ git clone [email protected]:hucq/mpvue-platform-sample.git
Copy the code

You can also refer to MPvue Baidu small program demo

Step 2: Install dependencies

Go to the project directory and install the dependencies

	$ npm install
	$ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta
Copy the code

Step 3: Build the object code

$NPM run dev:swan $NPM run build:swan $NPM run dev:swanCopy the code

Step 4: Developer tools preview

You can preview the project in the Developer tool by selecting dist/swan directory under the project directory in Baidu Developer Tool.

Tips & document

  • Mpvue development baidu small program
  • Mpvue official documentation

WePY

Step 1: Install the development tools

Install WePY development tool WePY – CLI;

$NPM install -g [email protected]Copy the code

Step 2: Initialize the project

Create a template project using the command

	$ wepy init standard
Copy the code

WePY can also refer to the development of baidu small program example

Step 3: Install dependencies

Go to the project directory and install the dependencies

	$ npm install
Copy the code

Step 4: Build the object code

Note: Remove — Watch will not listen for file changes and will compress and package the code

	# Global install only
	$ wepy build -o baidu --watch
	$ wepy build -o baidu
Copy the code

Step 5: Developer tools preview

You can preview the project in the Developer tool by selecting dist directory under the project directory in Baidu Developer Tool.

Tips & document

  • WePY develops Baidu applets
  • Official WePY documentation

Okam

Step 1: Install the CLI tool

  • Node installation (Node >=8 && NPM >= 3), the installation can be downloaded from the official website.
  • CLI tool installation:
	$ npm install okam-cli -g
Copy the code

Step 2: Initialize the project

	$ okam init my-project
	$ cd my-project
	$ npm i
Copy the code

Step 3: Build the object code

code instructions
npm run dev With Watch development mode
npm run dev:clean Delete the build artifacts (excluding the project configuration files) and rebuild with Watch development mode
npm run dev:server With Watch && development Server development mode
npm run build Delete the build and rebuild (no Watch && Development Server)
npm run prod Production environment construction

Step 4: Develop tool previews

You can preview the project in the Developer tool by selecting dist directory under the project directory in Baidu Developer Tool.

For more information about using Okam, refer to the Okam documentation.