May 22, 2021 Mini Program Cloud Development Study Guide
2. The forwarding function of the small program
3. Details of the configuration of the small program
4. Customize the top navigation bar
Through the previous practical learning, I believe that we have encountered a lot of problems in the process of writing code, in the process of constantly solving problems also summarized some experience. This section summarizes some of the experiences in development and the optimization, deployment, and go-to-line of small programs.
Although indentation has little effect on the code of small programs (Python places a strict emphasis on indentation, and different indentations have different meanings), indentation is essential for the readability of the code. Indentation in addition to aesthetics, but also can reflect the logical hierarchical relationship, mouse to the editor to show the number of lines of code, you can see there is - minus sign, click on the code to collapse and expand, this function in development can make it easier for us to clear the hierarchy of code, nesting relationship, to avoid the situation of less closure.
Small program wxml, js, json, wxss and other different file types, development, indentation arrangements will also be different, this needs to read the source code of other excellent projects to understand, here can not be detailed.
There are two ways to indent, one is to use the Tab key, and the other is to use spaces, and it is recommended that you use Tab. The small program defaults to an indentation of one Tab to 2 spaces, usually the front-end development is a Tab to 4 spaces, if you are not used to, you can set in the settings.
Code readable, beautiful and even elegant, is a good programmer should pursue, indentation is only a small part of it. High code readability, not only to improve their own development efficiency, but also conducive to team sharing and collaboration, post-maintenance and so on.
WeChat developer tools also have shortcuts that are more consistent with other IDE and code editors, which can greatly improve the efficiency of our code writing. The shortcut combinations for Mac and Windows are slightly different, so you can read the technical documentation yourself.
Technical documentation: WeChat developer tool shortcuts
The purpose of shortcuts is to write their own code convenience, everyone's shortcut usage habits will be different. Of course, the simplest universal Ctrl-C copy, Ctrl-V paste, Ctrl-X cut, Ctrl-Z redo, Ctrl-S save, Ctrl-F search and other shortcut combinations are very common, it is recommended that we all master.
There are a few shortcut combinations of WeChat developer tools that are worth using more.
Official shortcut documentation is incomplete, and it is recommended that you refer to visual Studio Code's shortcut PDF below to get a more complete understanding of shortcuts. Mac shortcuts, Windows shortcuts, the purpose of using shortcuts is to improve the efficiency of development, everything is still based on your habits, do not for shortcuts and shortcuts.
I believe that you will often see the developer tool debugger in the previous development of Console, it will be more effective to point out the code error information, location, etc. , is the daily development of very important tools, can be called programming light. W e must get into the habit of viewing errors, but also good at searching for relevant solutions based on false information. Later we will introduce it more useful, can be called artifacts, can not be ignored.
The code editor of the small program will also provide us with some error information, such as the appearance of red, this time to pay attention to, you do not appear characters are Chinese, missing punctuation and other relatively low-level and pediatric errors.
In addition to Console, the developer tool debugger has a wxml tab (which may be collapsed and needs you to expand), which lets us understand the composition of the wxml and wxss structure of the current small program page, which can be used to debug the css style of the component, etc. But the experience with this tool is particularly bad at the moment.
Small program developer tools are to provide some code auto-complement and code tips, you can see the official documentation about auto-complement content. In the usual development process can also pay more attention to and groping.
We just need to add the following code in the page under the js file of each page of the small program, our small program has the forwarding function, this can be experienced by clicking on the developer tool preview with the phone Oh
Technical documentation: Forwarding of small programs
onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: '云开发技术训练营', path: "pages/home/home, imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg", success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } },
To make a professional small program, we need to do a lot of subtle places, in the World of the Internet has a dedicated UX user experience designer, the work is as far as possible to user-centric, enhance the user experience, which has a set of knowledge system, we can expand to understand.
Sometimes we don't want tabBar at the bottom of our little program, so what do we do? We can delete app.json's tabBar configuration.
When we pull down a lot of small programs, there will be a white blank, very beautiful, but if we in the windows configuration items backgroundColor and nationalBarBackgroundColor color configuration is the same, the pull-down will not have blanks, such as:
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#1772cb", "navigationBarTitleText": "HackWork技术工坊", "navigationBarTextStyle":"white", "backgroundColor": "#1772cb" },
The color of the page background of the small program is white by default, what should we do if we want the page background of the whole small program to become other colors?
We can set the page by setting it directly, adding the following styles to the wxss file on the page, for example
page{ background-color: #1772cb;}
We found that in addition to the page default background color is white, many components of the default background color is white, the default color of the text in the component is black, text also has the default size, many components although we do not define their css style, but they come with some css style.
There are times when our page is relatively short, in order to enhance the user experience, do not want users to pull down the page, because the pull-down page will have a feeling of loose page, can be configured in the page's jason file, for example
{ "window": { "disableScroll": true }}
Note that it's not the app.json file, it's the jpon file of the page, why not the app.json file but the jason file of the page? You can think about the logic of how small programs deal with it.
The official default navigation bar can only make changes to the background color, and you'll need to customize the navigation bar to add some cooler effects to the navigation bar. Custom navigation is possible by setting the value of the navigationStyle (navigation bar style) configuration item configured on the page in app.json to custom:
"window":{ "navigationStyle":"custom"}
For example, let's add a nice wallpaper to the page of the small program, such as adding the following styles to home.wxss:
page{ background-image: url(https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.jpg)}
Then preview the page on your phone and discover that the top navigation bar inherent in the small program with the page title has been replaced by the background picture. We can also design some cooler elements in the original location of the top navigation bar, which can be achieved through the knowledge of the previous components.
There is such a scenario, we hope that all pages have the same bottom copyright information, if each page is repeated to write this copyright information will be cumbersome, if you can define a good code snippet, and then in different places to call a lot more convenient, this is the role of the template.
A static fragment of the page
For example, use the developer tool to create a new common folder on the page of a small program, create a new foot.wxml in the common, and enter the following code
<template name="foot"> <view class="page-foot"> <view class="index-desc" style="text-align:center;font-size:12px;bottom:20rpx;position:absolute;bottom:20rpx;width:100%">云开发技术训练营</view> </view> </template>
At the top of pages to be introduced, such as home.wxml, use impport to introduce this template.
<import src="/pages/common/foot.wxml" />
Then call the template at the bottom of the page code, such as home.wmxl, where you want to display it
<template is="foot" />
For example, on each page of the page has a similar page style and results, but different pages have different titles and page descriptions, with data binding can be very good to solve this problem, different pages of js data have different data, and the template wxml is a fixed frame.
For example, use the developer tool to create a new common folder on the page page of a small program, create a new head.wxml in the common, and enter the following code:
<template name="head"> <view class="page-head"> <view class="page-head-title">{{title}}</view> <view class="page-head-line"></view> <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view> </view> </template>
Let's add different title and desc information to the data in the js of each page, then introduce head.wxml on the page first, and then call the template in a specified location, such as in front of the wxml code.
<import src="/pages/common/head.wxml" /><template is="foot" />
We note that when
<template name=”模板名”></template>
we create a template, we use the name of the template, which corresponds to the name of the template, and when we call the template, we use the name of the
<template is=”模板名” />
corresponds to the name of the template.
The developer adds the customer service message button component within the small program, and the user can evoke the customer service session page within the small program and send messages to the small program. And developers (can bind other operators) can also directly use WeChat public platform web version of customer service tools or mobile small program customer service assistant for customer service message reply, very convenient.
Simply add the following code to the wxml file to evoke the customer service session page:
<button open-type="contact"></button>
Button's style can be modified based on the css knowledge you learned earlier.
The container that hosts the Web page. W ill automatically cover the entire small program page, personal type of small program is not supported for use. Web-view components can open associated public number articles, this is more friendly to many self-media users, public articles can use third-party tools such as Xiumi, 135 editor, etc. are very beautifully crafted, these articles can be opened in small programs.
<web-view src="https://mp.weixin.qq.com/cgi-bin/wx" rel="external nofollow" ></web-view>
web-view can also bind the record of good domain name, support JSSDK interface, so there are very small programs in order to save development costs, click on the link to open the web page, and do not do the native development of small programs, this is no longer within the scope of discussion.