Review of historical articles:

  • Wechat small program | common examples of development (a)
  • Wechat small program | common cases of development (two)
  • Wechat small program Notes | Common examples of development (three)
  • Wechat small program Notes | Common examples of development (four)
  • (5) Export Excel based on cloud platform

Recently still stay in the development of small procedures, the original thinking can soon finish the thing, hand over work, but unexpectedly, the plan can not catch up with the change.

Record some of the problems you have experienced, so that you can directly use “CV method” for similar requirements in the future and save some development costs. Of course, if one of these articles is helpful to you in front of the screen, click a small zan zan, I will always be happy ~

Better solutions are welcome. I’m an Android guy, and I’m not very good at it.

1. How to eliminate warning messages of applets cloud functions?

Solution:

  • Create a miniProgram directory (whatever name you want) under the project root directory, and then put all the so-called files/folders except project.config.json and the cloud function itself into the miniProgram directory.

  • Then configure the miniprogramRoot directory in project.config.json as follows:
{"miniprogramRoot": "miniprogram/", // corresponds to the name of the directory you just created.}Copy the code

Then execute the compilation, it may need to reopen the wechat developer platform.

2. How does wechat applets draw simple basic tables?

Embarrassingly, wechat mini program has not provided the table tag similar to that in H5, so we directly realized the table effect indirectly through flex Table attribute.

Now let’s implement the following simple table, which I wrote down for convenience.

Table, TR, TD in H5

<view class="table_content"> <text class="table_name"> </text> <view class="table"> <view class="tr"> <view Class =" TD "> date </view> <view class=" TD "> first quarter </view> <view class=" TD "> second quarter </view> <view class=" TD "> third quarter </view> <view Class ="td"> </view> <view class="tr"> </view> <view class=" TD ">111</view> <view class="td" class="td">222</view> <view class="td">333</view> <view class="td">444</view> </view> <view class="tr"> <view </view> <view class="td">111</view> <view class=" TD ">222</view> <view class=" TD ">333</view> <view class="td">444</view> </view> </view> </view>Copy the code

Then we started writing the corresponding CSS:

.table {
  display: table;
  width: 100%; 
  box-sizing: border-box;
  align-self: center;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  border: 1rpx solid gray;
  font-size: 28rpx;
  padding: 6rpx;
  text-align: center;
  vertical-align: middle;
}
Copy the code

To set the header and tail styles, you only need to get the current index and set the corresponding class/style when traversing the corresponding Array. Copy the key code here as an introduction:

<view 
  class="td  {{ idx == 0 ? 'font_weight' : '' }} {{ index == 0 ? 'min_width_170' : '' }}"
  style="background-color:{{ idx == yachtSailingTime.length - 1 ? 'lightgray' : '' }}"
  wx:for="{{ item }}" wx:for-item="regionalNum" wx:key="regionalNum">
  {{ regionalNum }}
</view>
Copy the code

3. How does wechat applet realize horizontal sliding table?

Most of the time, when we display more cel, or cell name is long, the line is not enough, so how to achieve horizontal sliding? Let’s take a look at the effect:

There are two things that need to be changed:

  • The exterior is wrapped with Scroll View;
  • Set col width to the maximum content width;

Now attached is the corresponding static webpage code:

<view class="table_content" wx:if="{{yachtsailtime. Length > 1}}"> <text class="table_name"> </text> <scroll-view scroll-x scroll-with-animation> <view class="table max_width"> <view wx:for="{{ yachtSailingTime }}" wx:for-index="idx" wx:key="yachtSailingTime" class="tr"> <view class="td {{ idx == 0 ? 'font_weight' : '' }} {{ index == 0 ? 'min_width_170' : '' }}" style="background-color:{{ idx == yachtSailingTime.length - 1 ? 'lightgray' : '' }}" wx:for="{{ item }}" wx:for-item="regionalNum" wx:key="regionalNum"> {{ regionalNum }} </view> </view> </view> </scroll-view> </view>Copy the code

The corresponding key CSS styles are as follows:

.max_width {
  width: max-content;
}
Copy the code

4. How does wechat applet realize cross-line table?

The effect is as follows:

At the beginning of this look really let me very confused, here is the completion of the page results of the key part of the screenshot, we observe together:

The key points are:

  • Time as a whole for a line, the effect is to cross the line. In fact, the subsequent COL contains more than one COL to extend the row, indirectly realizing inter-row operation.

Here’s the key code:

<view class="table_content" wx:if="{{ showMonthData}}"> <scroll-view scroll-x scroll-with-animation> <view class="table Max_width "> <view class="tr"> <view class=" TD font_weight"> date </view> <view class=" TD font_weight"> club </view> <view Class =" TD font_weight"> </view> <view class=" TD font_weight"> </view> <view wx:for="{{ monthData }}" wx:for-index="key" wx:for-item="value" class="tr"> <view class="td_span">{{key}}</view> <view class="td_span" wx:for="{{ value }}" wx:for-item="item"> <view class="td__span" wx:for="{{ item }}" wx:for-item="regionalNum" wx:for-index="idx" wx:key="regionalNum"> {{ regionalNum }} </view> </view>  </view> </view> </scroll-view> </view>Copy the code

And the corresponding key CSS code:

.td_span {
  display: table-cell;
  border: 1rpx solid gray;
  font-size: 28rpx;
  text-align: center;
  vertical-align: middle;
}

.td__span {
  border-bottom: 1rpx solid #333;
  padding: 6rpx;
}
Copy the code

5. How to deal with the picture overlap caused by the high level of native Canvas in uCharts?

Take a look at the effect first:

This function is mainly a filter of reports. Users can filter by date or month and view related reports and ICONS. When you click select date again after the first query is complete, the situation above will be overwritten.

The reason is simple: wechat’s native Canvas has the highest level, but our uCharts cannot cover it. There are three solutions to this problem:

  • Scheme 1: Set the position corresponding to the chart when clicking the frame to bounce up/disappear, so that its real position will leave under the frame layer of the mask. The defect is that corresponding processing is needed for each mask layer to bounce up and disappear. Of course, a common method can be directly extracted and referenced, but the relative cost is better, and the later maintenance cost is large. Of course, if the business is simple, only a few mask shell layer partners ignore. It is, after all, the roughest solution.
  • Scheme 2: after the chart is loaded, it will be converted into a picture by default, and its temporary loading address will be obtained. The default display of the chart will be controlled by the symbol, and the mask will be replaced by a picture. Replace it with a chart. Disadvantages, need to deal with the two direct replacement, or increase the corresponding animation processing, otherwise the effect will have a very abrupt feeling. The relative cost is low.
  • Scheme 3: Update the uCharts version and use 2D mode. The advantage is that you don’t have to deal with the logic of a solution or two.

Here due to time, do not record the corresponding effect. The solution is clear, I believe that you can solve it in minutes, and the corresponding key code will be attached later.

5.1 Scheme 2: Replace images

First write the HTML section:

<canvas hidden="{{ isImageShow }}" canvas-id="regionalSailingTimeHistogram" id="regionalSailingTimeHistogram" class="charts"/> <image class="charts" hidden="{{ ! isImageShow }}" src="{{ imageSrc }}"/>Copy the code

After rendering the diagram, turn the diagram into a temporary image and get the temporary loading address:

wx.canvasToTempFilePath({
  canvasId: 'regionalSailingTimeHistogram',
  success: (res) => {
    let tempFilePath = res.tempFilePath;
    that.setData({
      imageSrc: tempFilePath
    });
    console.log('---> canvasToTempFilePath', tempFilePath);
  }
}, that);
Copy the code

Set the image state to true when the corresponding mask layer is opened and false when the corresponding mask layer is closed:

openCalendar() {
  console.log('----> openCalendar');
  let that = this;
  that.setData({
    isImageShow: true
  });
},

closedCalendar() {
  console.log('----> closedCalendar');
  let that = this;
  that.setData({
    isImageShow: false
  });
},
Copy the code

If there are too many service mask bullet boxes, you are advised to extract them based on different types.

5.2 Solution 3: Upgrade the uCharts version and use the 2D Version

Find the latest version directly, copy the corresponding uCharts and replace to achieve a seamless upgrade, 😂

<canvas type="2d" canvas-id="canvasLineB" id="canvasLineB" class="charts"/> 
Copy the code

The corresponding CSS files are as follows:

.charts {
  width: 100%;
  height: 500rpx;
  background-color: #FFFFFF;
  margin: 30rpx 0;
}
Copy the code

The key JS code is as follows:

const query = wx.createSelectorQuery() query.select('#canvasLineB') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') regionalTripsSeaHistogram = new UCharts ({// These two parameters are newly added, turn on 2D and pass CTX canVAS2D: true, context: CTX, canvasId: canvasId, type: 'column', Legend: true, fontSize: 11, background: '#FFFFFF', pixelRatio: 1, animation: true, categories: chartData.categories, series: chartData.series, enableScroll: true, xAxis: { disableGrid: true, itemCount: 5, scrollShow: true, }, dataLabel: false, width: this.cWidth, height: this.cHeight, extra: { column: { type: 'stack', width: This.cwidth * 0.45/5,}}}); })Copy the code

6. How do I solve the cloud function call failure? ErrCode: -404011

I encountered this problem mainly when the test environment was migrating to the formal environment.

The cause of the problem is that there are multiple cloud environments, at least one test environment and one formal environment on my side, and the specific environment is not specified in app.js, so the cloud function fails to be found.

Solution:

Open the cloud development management platform, find the environment ID corresponding to the official environment, and copy it:

Set the environment ID when app.js initializes the environment, as shown below:

Wx.cloud. init({env: 'env ID', // traceUser: true,})Copy the code

Finally, it’s best to clean up the entire cache and recompile it.

7. About cloud function initialization

As mentioned in section 6 above, when the cloud function is initialized, it needs to set the corresponding env (environment ID), which is not difficult to understand.

But there’s a little bit of a bad thing about writing it this way. What if you have multiple environments? Do I need to adjust cloud initialization every time I switch environments? That doesn’t have to be exhausting.

Check the official website and find the following:

  • DYNAMIC_CURRENT_ENV

Excerpts from the official introduction:

The value is equivalent to symbol. for(‘DYNAMIC_CURRENT_ENV’), which is used to mark the current environment. If you pass this constant value to env in init, subsequent API requests will automatically request cloud resources in the current environment, such as cloud function A is currently in test-123. By default, it requests the database, file storage, and cloud functions of environment test-123.

Constants can be used for:

  • The env argument to cloud.init
  • Cloud. UpdateConfig env argument
  • The env argument in the config argument of each API

In other words, for the above question, we just need to adjust the initialization in the cloud function as follows:

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
Copy the code

It can be automatically accessed and processed according to the current selected environment.

The resources

  • Small program prompt organization directory structure processing method
  • uCharts