The previous work has not directly carried on the small program development, recently leisure down to quickly learn. Since we started from scratch, we didn’t use any framework or UI library, so let’s keep track of some of the pitfalls we stepped into during this development

Display effect (The interface style design and interaction come from Zhihu App of iOS 4.8.0) :

Please go to GitHub to view the dynamic effect.

First, the preparation before the start

  • Apply for an account: according to the mini program registration document, fill in the information and submit the corresponding information, you can have your own mini program account.
  • Development tools: wechat developer tools
  • Data Source:
    • Easy Mock: A data simulator that returns data in the format you want, all of which is generated randomly.
    • Mock.js: Easy Mock introduces mock. js, but only part of the syntax is provided in the documentation. To make your Mock data more concise, you can see more of the syntax in Mock.js.
  • Icon: Alibaba Vector icon library

Initialize a small program

  • Create an empty folder
  • Open the wechat developer tool and follow the steps in the “Your First mini program” document to create your own mini program.
  • The directory structure
WeChatApp | ___client | | ___assets pictures / / | | ___pages / / page | | | | ___index / / front page | | ___index. WXML / / page structure file | | . | ___index WXSS / / stylesheet file | | | ___index. Js / / js file | | ___utils / / global public functions | | ___app. Js file/method/system | | ___app. Json / / System global configuration file | | ___app. WXSS / / global stylesheets | | ___config. Json / / domain configuration file | ___project. Config. The json | ___READMECopy the code
  • Applets configuration fileapp.jsoncontent
{// page routing "pages": ["pages/index/index", // "pages/findMore/findMore", // Then no change/(ㄒ o ㄒ) / ~ ~) "pages/userCenter/userCenter", / / more (same as above, The original name for personal center o (╯ / ╰) o) "pages/market/market", "pages/searchResult/searchResult" / / market, / / search results page "pages/message/message", / / the message list page "pages/titleDetail/titleDetail", / / click on the title to enter details page "pages/contentDetail/contentDetail" / / click answer the details of the content into the page], // window" window": {"backgroundColor": "#FFF", // window backgroundColor" backgroundTextStyle": "Dark", / / the style of the font, loading chart drop-down background, support only dark/light "navigationBarBackgroundColor" : "#FFF",// top TAB background color: "navigationBarTitleText",// top display title "navigationBarTextStyle": "Black ", // Navigation bar title color, black/ White only "enablePullDownRefresh": true // Whether to enable pull-down refresh}, // TAB navigation bar "tabBar": {"backgroundColor": "# FFF ", // backgroundColor" color": "#999", // default text color" selectedColor": "#1E8AE8", // select text color" borderStyle": "White ", // the color of the border on tabbar, supports only black/white /** * TAB list, minimum 2, maximum 5 * selectedIconPath: selected image * iconPath: default image * pagePath: **/ "list": [{"selectedIconPath": "assets/home-light.png", "iconPath": PNG ", "page ": "pages/index/index", "text": "home"}, {"selectedIconPath": "assets/find-light.png", "iconPath": "assets/find.png", "pagePath": "pages/findMore/findMore", "text": }, {"selectedIconPath": "assets/market. PNG ", "iconPath": "assets/market. PNG ", "pagePath": "Pages /market/market", "text":" market", {"selectedIconPath": "assets/msg-light.png", "iconPath": "Assets /msg. PNG ", "pagePath": "pages/message/message", "text":" message", {"selectedIconPath": "Assets/more ultra-light. PNG", "iconPath" : "assets/more. PNG", "pagePath" : "pages/userCenter/userCenter", "text", "more"}}}]Copy the code
  • Configure the interface domain name: Since you use Easy Mock to simulate the interface data, you can use theSmall program management background – development Settings – server domain nameLt.Request Valid domain nameConfigured to `

www.easy-mock.com `.

Problems encountered during development and solutions

1, small program rendering HTML fragments

Looking at the web version of Zhihu, the answer data returned by the interface is a snippet of HTML code, so you can insert pictures at any position in the answer. Added: ak47 schematic item and loot added

After repeated attempts, I found that rendering an HTML snippet was not supported in the native version, so I gave up returning an HTML snippet, so I did not add an image to my answer list.

However, in the investigation, I found a custom component: wxParse- wechat small program rich text parsing component. I haven’t tried to use it yet, and I plan to try it in the next optimization project.

2. TAB switch at the top of the home page

Implementation approach

Each clickable TAB is bound to data-index. The index value of the TAB is obtained in the outermost bindtap binding method, and the corresponding tab-content is displayed according to the index value

<view class="tab-wrapper" bindtap="setActive"> <view class="tab-item {{isActive == 0 ? 'tab-item-active' : '}}" data-index="0"> </view> <view class="tab-item {{isActive == 1? 'tab-item-active' : '}}" data-index="1"> Recommend </view> <view class="tab-item {{isActive == 2? 'tab-item-active' : '}} "data - the index =" 2 "> top < / view > < the view class =" TAB - item - line "animation =" {{animationData}} "> < / view > < / view > < the view class="tab-content {{isActive == 0 ? 'show' : 'hide'}}"> // ... </view> <view class="tab-content {{isActive == 1 ? 'show' : 'hide'}}"> // ... </view> <view class="tab-content {{isActive == 2 ? 'show' : 'hide'}}"> // ... </view>Copy the code

3. Pull-up load and pull-down refresh

Implementation approach

Pull-up loading: emmmmmm…… I’m talking about pull-up loading, which means more loading after hitting the bottom, in case it’s not like what you think.

  • Native method: onReachBottom, after obtaining new dataconcatGo to the original data list.

Drop-down refresh:

  • Native method: onPullDownRefresh, the original data listconcatTo get the new data.

Note that every time you operate on an array, you must use setData to reassign to the array. Otherwise, the data will not update.

4. Search the storage of history

Implementation approach

Wx. setStorage, wx.getStorage and wx.removeStorage

  • Store search history:
> - With wx.setStorage, when the search is triggered, the field is checked to see if it is in the search history list, ignored if it is, and pressed into the array if not.Copy the code
  • Display search history:
> - Using wx.getStorage, when displaying the search mask, get the search history list, display the cycle, when the search history list length is greater than 1, display the button to clear the search history.Copy the code
  • Delete search history:
  • Single deletion: Each search history is bound with a deletion event, the index of the changed keyword is obtained, the keyword corresponding to the index is deleted from the search history list of the channel, and the keyword is stored again through wx.setStorage.
  • Delete all: Use wx.removeStorage to remove the keyword corresponding to the search history.

5. Swiper

In the “Ideas page” rotation component, XXXX from Yuan Zhihu App was discussing vertical word rotations that were embedded within the “swiper” module, but the swiper component in the applets did not support nesting and so failed to implement that section and replaced it with a new style of writing /(World “S”).

6, rolling suction top

The title bar on the page is displayed as it scrolls to the top.

Implementation effect

Implementation scheme

  • Use the entire page<scroll-view></scroll-view>Wrap, and bindbindscrollEvent that listens for scroll distance.
  • Set up the<scroll-view>If the value is vertical, set this parameter<scroll-view>The height of the.
  • Duplicate the same title bar and add the top style classfixed.
  • usewx:ifDetermine whether the scrolling distance of the current page has reached the required distance, and if so, render the title bar of the top.
<view class="find-hot-header fixed" wx:if="{{scrollTop >= 430}}"> <view class="find-hot-title"> </view> </view> <view Class ="find-hot-header"> <view class="find-hot-title">Copy the code

7. Expand and close the text

Display effect

By default, class is added to the text section, and ellipses are displayed after two lines.

.text-overflow{
  height: 85rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
Copy the code

The value of showIndex[index] is reversed when the text is expanded or folded up, and the class is added or removed accordingly.

<view class="find-hot-content {{! showIndex[index] ? 'text-overflow' : ''}}"> {{item.content}} </view> <view wx:if="{{! ShowIndex [index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow"> </view> <view Wx :if="{{showIndex[index]}}" class="find-show-all" data-index="{{index}}" bindtap="toggleShow"> </view>Copy the code

8. Change the switch style

The switch class name is: _(:з "Angle)_. Note that the parent class must be added otherwise the global component is modified.

Wx-switch-input {display: inline-block; position: absolute; top: 20rpx; right: 20rpx; width: 84rpx; height: 44rpx; } parent class. Wx-switch-input ::before{width: 80rpx; height: 40rpx; } parent class. Wx-switch-input ::after{width: 40rpx; height: 40rpx; }Copy the code

Four,

Through this small program development, learned a lot of things, although encountered a lot of problems, but the process of solving the problem let me harvest more, hands-on practice is the best way to learn.

In addition, many of the features have yet to be refined and some of the details could be further improved.

If there are mistakes and deficiencies in the article welcome criticism and correction.

Project Address:GitHub

(づ. ◕ ‿ ‿ ◕.) You guys will want a star

Attached is a job Posting, (╹ del ╹(Check it out