Taobao merchant application (Ali small program) development pit record

Alibaba is integrating taobao wireless open platform and other businesses into merchant applications, similar to Alipay mini program, which is to display and market Taobao Tmall stores in the form of mini program.

Recently is developing business application small program, stepped on countless pits, originally thought micro channel small program is enough pit, did not expect this almost copy micro channel small program mode taobao small program more pit. After all, it’s useless to complain when you’re just starting out. Write down the problems I encounter so that others can spend less time with them.

There is a community platform to communicate with each other when there are development problems with wechat mini programs. The advantage is that developers can communicate with each other, and some of the comments are very valuable; The downside is that you don’t always get an official answer to your questions, and many of your posts may fall on deaf ears.

On the ali side, feedback problems can not be through the community, only to use the work order system. The advantage is that there are questions to answer, working days generally within half an hour can see the reply, a few words can turn nail nail talk; The disadvantage is that the respondents are almost ignorant of professional questions, can only be small program developers and official platform developers of the messenger, and all customer service systems, will only put the platform document has something rumble back and forth, unless you use a clear language to say that their problem is really not in the document. And once the customer service says the problem is complicated and invites you in for a long conversation, the question may be answered quickly, or it may never be answered. In addition, the work order system looks like it was developed 10 years ago. Stickers and stickers are very unfriendly, and the search function is almost obsolete.

V1 and V3 documents exist and run at the same time, and the links in many documents are not updated. You will open the documents of V1, V3 and even Alipay mini program successively in the gradual browsing, while the more complicated documents of TOP interface may make you further confused. It’s not even clear which category the features you want should fall into.

Without further ado, write down the problems I encountered during my development.

Making a Network request

I had already packaged a set of API tools based on my.Request, but it didn’t work when I tried it.

The document was not completely deleted, and the my.request imitated wechat has been abandoned.

For cloud applications, the only usage is now pushing the official cloud. Application. HttpRequest

Miniapp.open.taobao.com/docV3.htm?d…

A parent component cannot define a class for a custom child component

Such as

<aaa class="test" />
Copy the code

This is not valid, and styles defined by the parent component to the custom component are discarded.

In wechat applets and VUE, such a definition will eventually be merged with the outermost internal class defined by the component, but not in Taobao applets (officially provided components can).

My temporary solution is:

<view class="test">
    <aaa />
</view>
Copy the code

Then write the style:

.test > view
Copy the code

If you use a calibration tool like stylelint, whitelist the view tag keyword.

Maybe you can also add a props called class to implement this in a roundabout way, to be verified

To upload pictures

The implementation of uploading images has been a problem for me for a long time, and it’s a problem that almost every developer has to deal with, and I’m surprised that the official documentation hasn’t been updated to point it out. At the end of this section, the previous trial-and-error approach won’t work.

First, the document does have such an interface: my.uploadfile

So my first reaction was to use it to upload pictures, and the wechat mini program does the same.

In fact, my. UploadFile is just an HTTP request for a transfer stream. I want to upload pictures to the OSS service of Ali Cloud, so I need to simulate various parameters of OSS upload by hand.

Refer to this document for implementation.

Note that this is in the applets client implementation according to the key generation signature, the private key exposed to the front end, theoretically has a security risk.

After the parameters are specified, specify the upload server address, which is the URL of the HTTP request.

For example: https://my-oss-name.oss-cn-hangzhou.aliyuncs.com

A level 4 domain name is the bucket name of an Ali Cloud OSS.

After all of the above, the local developer tools tested fine, but the preview and real machine debugging found an error. The error message is

{errorCode:4,errorMessage: "no premission"}
Copy the code

My. UploadFile has limited domain name. Only the following domain name rules are allowed:

miniappcloud.taobao.com
media.taobao.com
upload.media.aliyun.com
miniappcloud-common-file.oss-cn-zhangjiakou.aliyuncs.com
\\S\\.alicdn\\.com$
\\S\\.mmstat\\.com$
Copy the code

To put it simply, my. UploadFile interface can only be used by Ali internal services, and cannot be called by ordinary developers. It should be blocked and scrapped.

There is only one way to upload pictures now, which is to switch to the cloud storage in the development of Ali Cloud

Here again, the document says, applets are associated with cloud services and can only choose between cloud development and cloud application.

And we use the background is the cloud application, don’t you use the cloud storage function in the cloud development?

Fortunately, even if you choose a cloud application, you can still use the cloud storage function developed by the cloud. However, cloud storage management can only be done in developer tools.

Note that every time you click on the cloud developer tool, the server and client directories will be automatically created under the project, and the original project files including node_modules will be moved to the client directory. If you do not want to change the directory, remember to enable Git first, do not click this button

I won’t go into detail on cloud storage calls, but there is one more pit to verify:

After a successful upload using cloud storage, you get an internal address with the cloud protocol prefix and a URL.

Both the documentation and customer service feedback indicate that the URL is not permanent, meaning that if you want to access the file, you need to call the cloud storage interface to get a temporary address.

The problem with this design is that you cannot directly assign the address of the stored image to the image component, because the URL required by the image can only be retrieved asynchronously. You need to wrap another component to display the image in the cloud.

However, the actual use found that the URL obtained after the successful upload has not expired so far, so used first.

Preview and real machine debugging, two-dimensional code lost global parameters

Global parameters added in compile mode are valid for local debugging, but are discarded for preview and real debugging. Configuration items in compile mode are only available on the default page.

After inquiring the work order, I learned that I could only add parameters by myself.

First click the two-dimensional code pattern obtained after successful compilation to get a string of addresses, similar to this

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004151019.52&nbsource=debug&nbsn=DEBUG&channelId=1jOXeERZ54A_2IS7tG_0Co 1du_0149_1vA&isRemoteX=trueCopy the code

You then need to URL-encode global parameters, such as raw parameters

dev=true&id=123
Copy the code

Encode into

dev%3Dtrue%26id%3D123
Copy the code

As the value of the query parameter, concatenated to the URL to become

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004151019.52&nbsource=debug&nbsn=DEBUG&channelId=1jOXeERZ54A_2IS7tG_0Co 1du_0149_1vA&isRemoteX=true&query=dev%3Dtrue%26id%3D123Copy the code

Finally open this address in the browser, and then scan code.

Every time the real machine debugging has to do this once, very troublesome, I do not know when can be corrected.

PC base component Overlay is not running properly

PC side try to use overlay component to implement popover effect.

To pop up an overlay in center, configure it like this:

<overlay visible="{{overlay}}" onRequestClose="onClose" align="cc cc" hasMask > overlay visible="{overlay}}" align="cc cc" hasMask >Copy the code

Then two fatal problems were discovered:

1. Overlay hierarchy cannot be modified

If there is a system level popover operation inside the popover, such as my. ChooseImage, the system will pop up the select Photo menu is covered under the current pop-up layer. There is no method for overlay hierarchy adjustment in the documentation.

2. The overlay has any custom components in it that crash the second time it pops up

Let’s say the simplest structure

<overlay visible={{visible}}>
  <aaa />
</overlay>
Copy the code

When Visible is changed to True a second time, the app crashes with an error message

worker render components is not sync! can not find id from path: 1-1-1-3-1:/src/components/aaa/index
Copy the code

The customer service only said that the problem had been transferred to the developer, but there was no feedback so far. Therefore, the overlay could not be applied, so we had to implement a popover component by ourselves.

Custom component styles are global

Page styles work only within the page, which is common sense, but I didn’t expect component styles to work globally.

When styles of the same name appear in different custom components, they influence and overwrite each other.

The official push on the merchant PC side is to use the routing system in the extension (which, by the way, is very simple and cumbersome to use). If the routing system is used, it means that all pages are components. In this case, this global scope will seriously affect development.

A temporary workaround is to manually overlay the class of the current component on the outermost layer of the component style (SCSS is convenient)

The PC failed to receive debugging information when using remote debugging. Procedure

According to the document:

Miniapp.open.taobao.com/docV3.htm?d…

You can normally launch the preview package from Qianniu, open the DevTool TAB on Chrome, and close the current preview application, you can see chrome pop-up connection disconnection.

However, the various output console messages executed in the preview app are not reflected in the Chrome debug TAB, and you do not see any changes and output.

Work order feedback says:

So far, chrome 80.0.3985.0 and above (or 79 or higher) can connect to applets js environment, and even break debugging code, but you can’t see the console output, so you can type console.log in the console. It also doesn’t output. This issue is known to be resolved, please try using the earlier version of Chrome to bypass.

I don’t want to install an old version of Chrome, if you have the energy to try.

After the merchant background Qianniu PC application is uploaded, the preview code cannot be opened on the Qianniu client

In the version management-development phase, it can be seen that the performance task has passed. However, after viewing and copying the preview code, a message is displayed indicating that the page does not exist when the preview code is pasted in the developer Settings of Qianniu and opened.

It is normal to copy the QR code and paste it to open after clicking preview in local debugging.

In fact, this is not the problem of the small program itself, but even in the login state, there may be something like a session expired, you need to manually log in again.

HideLoading is invalid after executing showToast

It’s in the documentation

Call my.hideloading before my.showtoast, toast is overwritten by my.hideloading and will not be displayed.

If I encapsulate an asynchronous request as a public method, showLoading before the request and hideLoading after the request, the result cannot be displayed after the request completes.

The worksheet did not provide an effective answer to this problem. In actual tests, it was found that toast would not pop up when simulated on the developer tool, but could pop up normally on the real machine.

Share Parameters added to path are not available when terminal is opened

This is a big hole.

App.onload is not available. Page.onload is not available.

When you open a widget by sharing, you get the argument from the query in the page onload.

onLoad(query){
  console.log(query)
}
Copy the code

To open it by scanning, you need to take the parameters from the Options in the app.

onLoad(options) {
  console.log(options.query)
}
Copy the code

The key issue here is that startup parameters are essential for a merchant app, such as the ID of a marketing campaign, without which the app can’t actually do anything or display anything.

Therefore, I can only make the initialization a step-by-step process:

1. Create a global initialization Promise object
2. fromapp.onLoadIf the keyword is not found, skip
3. frompage.onLoadIf the keyword is still not obtained, enter the simulation data display and use the simulation data to enter the next step

Remember the previous qr code without parameters? Now when questioning can not like wechat to add a version of the compiler parameters, can only be assembled parameters of the TWO-DIMENSIONAL code corresponding URL posted to the audit remarks, and the application auditor often do not look at the remarks directly scan code to open the application, he saw a blank, will refuse to pass. In order to increase the probability of overreview, a simulated data display mode must be made.

4. Perform initialization actions based on parameters, such as determining the runtime environment, initializing the API Cloud instance, placing the activity ID in globalData, and so on. Finally, set the initial Promise object to Resolved.
5. Subsequent actions of the app or page should occur after the initial Promise object is completed. The key point is that cloud instance initialization is also asynchronous, and only after cloud initialization is complete can asynchronous request operations such as retrieving data be performed.

The PC server can only accept parameters in page. OnLoad

It’s subtly different from the previous question.

The generated TWO-DIMENSIONAL code address is as follows:

https://m.duanqu.com?_ariver_appid=xxx&nbsv=0.1.2004161617.2&nbsource=debug&nbsn=DEBUG&query=dev%3Dtrue
Copy the code

You can’t get query information in your app’s onLoad.

You can only get the entire Options object in the onLoad page.

The difference here is that in the normal scenario described in the documentation, the onLoad input would be a Query object. I am not sure when this incongruous difference will be corrected and recommend that the processing statement be written as:

let query = options.query || options
Copy the code

The return result is false, which is automatically null

Do not return a Boolean or number object if you have an interface that checks whether the user is a member or how many times the user has played.

Because of the cloud. Application. HttpRequest this interface I estimate will use an if condition to determine the background the returned data. If the background returns false or 0, the front end will always get an empty object {}.

Therefore, make sure that the content returned by all interfaces is a complex object.

Jump to store fixed page interface tmall does not respond

Use my. TB. NavigateToTaobaoPage jump to store membership page, in hand on the new normal, there is no reaction of Tmall, and there is no error message

The work order reply is:

The my.tb. XXX interface is expected to support tmall client at the end of the month

The relative path of the image is relative to the page, not the current component

This question is also disgusting. A component cannot have its own image directory and cannot be decoupled.

The work order also suggested that the pictures should be placed in assets directory or OSS.

What about coupling? What about remote requests affecting loading speed?

I think this is obviously a BUG, the customer service only said that the feedback has been given to the development, so far there is no follow-up.

Invalid content custom password scouring for share Settings

Share the use of document content is actually copied from the alipay small program document, the description is still squeak password

The reply of work order is that it is not supported at present, and the document will be removed (it has not been removed by the time of dispatch).

Pay attention to the store

You need to apply for permission in the C-end template

Merchant application commodity collection, store attention permission package

Note that this is not a merchant application under the outermost application management, where the permission package is not in the permission management

Pay attention to the store-related interfaces

https://miniapp.open.taobao.com/docV3.htm?docId=913&docType=20

Note that the id here is not the store ID, but the seller ID of the store.

You need to apply for another seller information query permission package, which is queried by the server and returned to the consumer.

In actual use, the android test passed.

Execution error in IOS:

{code:2, errorMessage: "parameter error: id"}Copy the code

In addition, the Error object field in IOS is different from android. It is not a standard Error object.

On android, the returned errorMessage text field is message, while on IOS, it is errorMessage.

It turns out that id cannot be a string, but must be a number.

Equity center plug-in configuration

You need to use the equity center to issue coupons.

Equity center plug-in, local emulator can not run, can only be debug on the PC Qianniu.

Also, you can’t see debugging information due to chrome version issues, which have not been fixed yet.

During the process of use, it was found that the plug-in could not be introduced in the form of a component. After a long time of trouble, it was found that the document was inconsistent.

Console.open.taobao.com/?spm=a219a….

This document in the Plug-in Center is very damaging.

"Plugins ": {"myPlugin": {"version": "0.0.1", "provider": "3000000002026202"}}Copy the code

Note that app.json does not follow the example. There are no double parentheses on the provider.

However, the plug-in documentation says that component invocation is supported, which is actually not possible. Use documentation to

Miniapp.open.taobao.com/docV3.htm?d…

This one shall prevail.

The page is configured with transparentTitle

When the value of transparentTitle is set to always, Android runs normally.

However, when you swipe up on IOS, a white navigation bar will appear at the top, and there is no title text on the navigation bar, nor can you change the text color with titleBarColor, just a white bar.

As a result, the audit was not approved because of this long bar.

This field needs to be deleted. By default, the navigation bar is not displayed.

The FORM component documentation on the PC side is incomplete, and validate is almost unusable

The description of validateState in the documentation states:

Verification status. If this parameter is not set, it is automatically generated based on the verification rule.

But there are no documentation or examples of where validation rules are configured.

Abandoned pit

As there was almost no interest in the app, business was discontinued, and added