Convert the published h5 page into a WeChat applet without redevelopment, and the operation is super simple!

The technologies used are uniapp and web-view.
First of all, let’s understand what web-view is:
in a simple sentence: web-view is a web browser component that can be used to host web pages. It will automatically Cover the entire page (nvue needs to manually specify the width and height).
Various attribute values ​​​​of web-view:

Step 1: Use HBuilder to create a uniapp project. If HBuilder is not installed, you can download it from the official website.
Official website address: https://www.dcloud.io/hbuilderx.html
Create a new uniapp project:

  1. Click File --> New --> Project
  2. Select uni-app in the pop-up window
  3. Configure the project name, and all storage paths of the project, and select the template according to the requirements
  4. After the configuration is complete, click Create below

Step 2: In the created uniapp project, find the index.vue file and write a tag, where the attribute src needs to configure the link address of the h5 to be accessed.

<template>
	<view class="content">
		<web-view src="http://要访问的ip地址/lsyzt/lsydy/new_Hpage.html"></web-view>
	</view>
</template>


Step 3: Configure the appid of the Mini Program
to log in to the WeChat public platform, log in to the Mini Program account, find the account information in [Basic Configuration] under [Settings], and copy the AppID.

In the program directory, find the manifest.json file, and place the appid in [WeChat Mini Program Configuration]

Step 4: After the configuration is complete, click Run to run to the Mini Program Simulator,

select the WeChat developer tool, and configure the path.

During the compilation process, if an error is reported:

You need to open the service port in the WeChat developer tool:
After the configuration is complete, the interface will be displayed in the developer tool:
Step 5: Publish the WeChat applet
In the developer tool, click the upload button , configure the version number and other relevant item notes, click upload at the bottom right.

After the upload is completed, it can be displayed on the WeChat public platform:
[Management] - [Version Management]

Step 6: Submit the review
program development is completed, and after it is correct, you can Just click Submit for review in the picture above and wait for the review to pass.

Guess you like

Origin blog.csdn.net/qq1507171150/article/details/131328561