Uniapp develops wechat applet from build to launch

Preface ：

        This paper mainly introduces uniapp The basic use of , And the use of uniapp A detailed process in the process of enterprise development , Suitable for the first use uniapp Partners who develop wechat apps , Or for those who have no actual combat experience ; Use Hbuildx coordination Uniapp Framework in combination with Uview Of UI The framework demonstrates today's Demo！

One 、uniapp The project starts

Before we start, let's take a look at the official website Uniapp Introduction to , Also let us have a more comprehensive understanding ;

uni-app  It's a use  Vue.js (opens new window) Develop a framework for all front-end applications , Developers write a set of code , Can be posted to iOS、Android、Web（ Response type ）、 And all kinds of little programs （ WeChat / Alipay / Baidu / headlines / anonymous letter /QQ/ Well quickly / nailing / TaoBao ）、 Fast application and other platforms .（Uniapp Official website address ）

 

1. Download tool

  Uniapp Yes, with one HBuildx This development tool is used to , So we have to download Hbuildx development tool ;

  Hbuildx Download address  

 

2. Project creation

  We have already downloaded the previous step HBuildx This development tool , Next we need to create the project ！

  I use it Windows May and Mac There is a slight difference ; Click file... In the upper left corner --> newly build --> project

  Below we can see that there are Common projects , Yes uni-app project

As far as I'm concerned , Generally at work , I will choose to create a new ordinary project , because uni-app Although the sample project is very fragrant , But it is not very conducive to development , A lot of things need to be deleted , So my personal choice is the ordinary project ; 

 

3. Install utility plug-ins

        Click Tools --> Plug in installation , We can see Hbuildx Provides us with core plug-ins ;

    What is a core plug-in ？  It is conducive to our development , Things that can improve our development efficiency ;

    What is the plug-in market ？  We are in the process of development , Yes UI frame perhaps uniapp Built in components can not meet our business needs , You can go to the plug-in market to have a look , There will always be one who is quite satisfied ！

For example, we use Git Submit the code to the warehouse , We can download Git plug-in unit , Help us use Git！ For example, we format the code We can download Prettier plug-in unit ,ctrl + K Quick formatting

4. Run to wechat development tool

      At this stage, the configuration before development has been basically completed , We're going to run our project and have a look

however , There are several things we need to pay attention to when running small programs ：

① To configure manifest.json file , Configure wechat applet AppID

Wechat applet AppID Where does it come from ？ Log in wechat public platform , Development management --> In development setup

 ②  Running wechat applet requires configuration Configure the developer tool path , such Hbuildx Just know where to open the wechat developer tool

 

③ Hbuildx Configuration of is over , We also need to configure wechat developer tools , Otherwise, it will fail

    Open the service port in the wechat developer tool

 

  

5. Project operation

  Before running the project, we need to add a little bit of code before we can see the effect after running , Otherwise, it's just a white page , Not what we want to see

  pages Now we add two new pages , stay pages.json Among them, configure the basic tabbar part

index Code

<template>
	<view class="content">
		<!-- <logo></logo> -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="text-area">
			<button type="warn" size="default" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> Get the user's mobile number </button>
			<view style="font-size: 36rpx;">
				<text>
					 The current mobile number is ：
					<text v-show="countryCode || phoneNumber">+{
   { countryCode + '-' + phoneNumber }}</text>
				</text>
			</view>
		</view>

		<!-- #endif -->

		<!-- #ifndef MP-WEIXIN -->
		<view class="text-area"><text class="title"> Please open... In wechat applet </text></view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
		};
	},
	methods: {
		
		getPhoneNumber(e) {
			if (!e.detail) {
				return;
			}
		}
	},
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.text-area {
	width: 80%;
	margin-top: 35%;
	font-size: 48rpx;
	button {
		margin: 60rpx 0;
	}
}
</style>

H5 Code  

<template>
	<view class="h5">
		<logo></logo>
		<view class="h5-title">
			<!-- #ifndef H5 -->
			<text> Please be there. H5 Platform open </text>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.h5{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&-title{
		font-size: 48rpx;
	}
}
</style>

Then click Run , Run to wechat applet , You can see what we just wrote  

 

 

6. Personalized applet

    

What is a personalized applet ？ It's different Tabbar, Different navigation bars , Show the effects different from ordinary applets , This middle bulge Tabbar We can use Uview Inside Tabbar, You can also define a tabbar, Detailed customization tabbar Tutorial you can see    Customize tabbar course  , We won't talk about other personalization settings one by one , You can check if you are interested ！

7. How to call during development API

    I believe we all know that the server domain name needs to be configured to develop wechat applets , And the server domain name must be https:// start , Have SSL certificate , The domain name has been put on record ....... Do we have to set it up in advance when we develop it ？

    Not necessarily. , If our company , Or when the customer didn't give us the domain name at first , We can use wechat developer tools , Check not verifying legal domain name 、web-view( Business domain name )、TLS Version, and HTTPS certificate  , Then use our lan IP Address can be easily developed , This is where you are about to leave the environment , Our development and production environments ！

---

All the above are development links , The following is the configuration phase , Make a pre launch preparation  

---

Two 、 Wechat applet release

    So far, I believe everyone has already understood the basic part of small program development , So the product manager said , Xiao Cheng , The applet will be launched soon , Tell me what information you need ？ Or say Get ready to go online , This will not be very ignorant ？ take it easy , Let's take a step-by-step look at

1. Configure applet association information ( WeChat official account associated applet )

Why should we say that the configuration applet is associated with a official account ？

  Because I am in the process of development , I met a customer who asked me how to get users UnionID , But our app is not associated with any official account , Public platform , So confirm the requirements in advance ;

obtain UnionID Conditions ？

If developers have multiple mobile apps 、 Web application 、 And public account number （ Including applets ）, It can be done by UnionID To distinguish the uniqueness of users , Because as long as it is a mobile application under the same wechat open platform account 、 Web apps and public accounts （ Including applets ）, User UnionID Is the only one. . let me put it another way , The same user , Different applications on the same wechat open platform ,UnionID It's the same .

 

2. Configure applet principal information

  Why should I configure the applet principal information in advance ？ Look at the picture below  

  The screenshot above is a small program that has been launched ,  After applet release , Non human accounts can be renamed through authentication . So we'd better configure everything we can before we go online , Avoid changing the audit time after going online 、 Need more information and so on ！

 

3. Configure server domain name

    It is said above that we can pass IP To call Back end brother's API, After the launch, it must be impossible ; Because each wechat applet needs to set the communication domain name in advance , Applet You can only communicate with the specified domain name . Including ordinary HTTPS request （wx.request）、 Upload files （wx.uploadFile）、 Download the file （wx.downloadFile) and WebSocket signal communication （wx.connectSocket）.

 

4. Release the launch process

    Talking about here , Unconsciously , Our app is ready to go online , Let me show you in a few steps

① Click on Hbuildx Release in the toolbar

This step will help us package the code we write , Compress the volume , After all, the code package of wechat applet can only be 2MB size , If the main package is too large , Subcontracting should be considered

 

② Click... In the wechat developer tool Upload Button   

 ③ At this time, we will go to wechat public platform to log in to our applet developer account to view the experience version applet

 

  Here we have to pay attention to , At this time, the experience version applet can normally test the real machine for the test brother

④ Finally, the application is submitted for review , Official release

  This is an easy step , Submit directly for review , But we need to input some data for our auditors to test

 

Click continue to submit

 

If it is the first submission for review , This page is preceded by a Reuse the qualification or fill in the qualification page , Just pay attention , And then submit it for review , Just wait for the approval ~~~

How long will the audit take ？

  This 30 Minutes to a day , My first audit took about an hour , Every time in the back 30 About minutes , It's pretty fast ！ 

---

Through auditing , Now the applet has been successfully launched ~~~

---