Foreword:
This article mainly introduces the basic use of uniapp and a detailed process of using uniapp in the process of enterprise development. It is more suitable for partners who use uniapp to develop WeChat applets for the first time, or for small partners who have no practical experience. Use Hbuildx with Uniapp The framework combines Uview's UI framework to demonstrate today's Demo!
Table of contents
4. Run to WeChat development tools
However, we need to pay attention to several places when running the applet:
7. How to call API during development
2. Wechat mini-program release
2. Configure the main body information of the applet
3. Configure server domain name
① Click Release in the Hbuildx toolbar
②Click the upload button in the WeChat developer tools
④ Finally, the application is submitted for review and officially released
1. The uniapp project started
Before starting, let's take a look at the introduction of Uniapp on the official website, which also gives us a more comprehensive understanding;
uni-app It is a framework for developing all front-end applications using Vue.js (opens new window) . Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/ Toutiao/Flying Book/QQ/Kuaishou/DingTalk/Taobao), Quick App and other platforms. ( Uniapp official website address )
1. Tool download
Uniapp is used with the development tool HBuildx, so we need to download the Hbuildx development tool first;
2. Project creation
We have downloaded the development tool HBuildx in the previous step, and we need to create a project in the next step!
I use Windows, which may be slightly different from Mac; click File --> New --> Project in the upper left corner
In the picture below, we can see that there are common projects and uni-app projects
Personally, I usually choose to create a new ordinary project at work , because although the uni-app sample project is very fragrant, it is not very conducive to development, and many things need to be deleted, so I personally choose ordinary projects;
3. Install utility plugins
Click Tools --> Plug-in Installation , we can see that Hbuildx provides us with core plug-ins;
What is a core plugin? It is something that is beneficial to our development and can improve our development efficiency;
What is the plug-in market? During the development process, if we encounter UI framework or uniapp built-in components that cannot meet our business needs, we can go to the plug-in market to have a look, and there will always be one that is more satisfactory!
For example, if we use Git to submit code to the warehouse, we can download the Git plug-in to help us use Git! For example, if we format the code, we can download the Prettier plug-in , ctrl + K for quick formatting
4. Run to WeChat development tools
At this point, the configuration before development has basically been completed, we have to run our project to have a look
However, we need to pay attention to several places when running the applet:
① Configure the manifest.json file and configure the WeChat applet AppID
Where does the WeChat applet AppID come from? Log in to the WeChat public platform, development management --> development settings
② To run the WeChat applet, you need to configure the developer tool path, so that Hbuildx knows where to open the WeChat developer tool
③ The configuration of Hbuildx is over, we also need to configure the WeChat developer tools, otherwise it will fail to run
Open the service port in the WeChat developer tools
5. Project running
Before running the project, we need to add a little code to see the effect after running, otherwise it is just a white page, which is not what we want to see
pages Next, we add two new pages and configure the basic tabbar part in pages.json
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">获取用户手机号</button>
<view style="font-size: 36rpx;">
<text>
當前手機號為：
<text v-show="countryCode || phoneNumber">+{
{ countryCode + '-' + phoneNumber }}</text>
</text>
</view>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="text-area"><text class="title">请在微信小程序中打开</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>请在H5平台打开</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 the WeChat applet, and you can see what we just wrote
6. Personalized Mini Programs
What is a personalized applet? Different tabbars, different navigation bars, displaying different effects from ordinary applets, we can use the tabbar in Uview for the raised tabbar in the middle, or define a tabbar by ourselves. You can refer to the detailed custom tabbar tutorial See the custom tabbar tutorial , we will not talk about other personalized settings one by one, you can check it out if you are interested!
7. How to call API during development
I believe everyone knows that the development of WeChat applets requires the configuration of the server domain name, and the server domain name must start with https://, have an SSL certificate, and the domain name has been filed, etc... Should we set it up in advance when we develop ? ?
Not necessarily, if our company or the customer did not give us a domain name at the beginning, we can check in the WeChat developer tools not to verify the legal domain name, web-view (business domain name), TLS version and HTTPS certificate , and then use our LAN IP address to easily develop. This is where you have to separate the environment, our development environment and production environment!
The above is the development link, and the following is the configuration link, making a preparation before going online
2. Wechat mini-program release
At this point, I believe that everyone has a good understanding of the basic small program development part, so the product manager said at this moment, Xiao Cheng, the small program will be launched soon, tell me what information do you need? In other words, you are ready to go online, isn't this confusing? Don't worry, let's see step by step
1. Configure the mini-program association information (WeChat public account associated mini-program)
Why do you say that the configuration applet is associated with the official account?
Because during the development process, I met a customer who asked me how to obtain the user's UnionID, but our applet has not been associated with any public account or public platform, so we need to confirm the requirements in advance;
What are the conditions for obtaining UnionID?
If the developer has multiple mobile applications, website applications, and public accounts (including mini programs), UnionID can be used to distinguish the uniqueness of users, because as long as they are mobile applications, website applications, and public accounts under the same WeChat open platform account (including applets), the user's UnionID is unique. In other words, the same user has the same UnionID for different applications under the same WeChat open platform.
2. Configure the main body information of the applet
Why do you need to configure the main body information of the applet in advance? look at the picture below
The screenshot above is one of our mini-programs that has been launched. After the mini-program is released, non-personal accounts can be renamed through authentication. Therefore, it is best to configure everything that can be configured before going online, so as to avoid troublesome things such as long review time and need for more information after going online!
3. Configure server domain name
As mentioned above, we can call the API of the back-end big brother through IP during development, so it will definitely not work after going online; because each WeChat applet needs to set the communication domain name in advance, the applet can only communicate with the specified domain name through the network . These include normal HTTPS requests ( wx.request ), uploading files ( wx.uploadFile ), downloading files ( wx.downloadFile ) and WebSocket communications ( wx.connectSocket ).
4. Publish the online process
Talking here, before we know it, our small program is ready to go online, I will show you in a few steps
① Click Release in the Hbuildx toolbar
This step will help us package the code we wrote and compress the volume. After all, the code package of the WeChat applet can only be 2MB in size. If the main package is too large, we need to consider subpackaging.
②Click the upload button in the WeChat developer tools
③ At this time, we will go to the WeChat public platform to log in to our small program developer account to view the trial version of the small program
Here we have to pay attention, at this time, the trial version of the applet can already be tested on the real machine for the tester.
④ Finally, the application is submitted for review and officially released
This step is very simple, just submit for review, but we need to enter some information for our reviewers to test
Click to continue to submit, if the friend who submits for the first time needs to verify User Privacy Protection Guidelines Settings
If it is the first time to submit for review, there is a page for reusing qualifications or filling in qualifications before this page, please pay attention to it, then submit for review, and wait for the review to pass~~~
How long is the review time?
This can range from 30 minutes to a day. The time for my first review is about an hour, and the next time is about 30 minutes, which is still very fast!
After passing the review, the mini program has been successfully launched~~~