background
I guess I haven’t written in nuggets in a long time, and I haven’t posted anything on my blog about my insights, technical growth, etc. This may be advanced with from his students for the working people, every day with the class move brick, I actually did a lot of people feel interesting thing, I’d like to have these items for a “0 to 1 practice” series, hope I can share design realization process through to find inspiration for oneself, also can help to doing the development of the students it’s my pleasure. The first one I think I can share is OfferTalk:offer is a platform. I think everyone here uses Offershow, and I also use offershow. My inspiration for designing and developing OfferTalk comes from it. So I began to offerTalk. At that time, I had this idea and it lasted for about 2 months until it was completely online. Next, I will share the process of design, implementation, online and operation. Offertalk small program development and implementation of the process will be divided into 3 parts, are small program front end, Web management end, Node server, today is small program management end, process will doping product thinking, technical details, technology precipitation and so on
The preparation
As we all know, wechat small program was officially released in 2016. It has a unique advantage that it relies on wechat endorsement and has large traffic. If you are lucky, it may be popular. Before developing wechat applets, you need to prepare the following items:
Applet account application
There is a mailbox account that has never registered the wechat development platform, and users can register the small program. The process of registering the small program is as follows: Click to register, and the administrator who fills in the small program will generally scan the code with his own wechat. Note that a personal account can only be bound at most5A small program account, one enterprise user account can be bound to the most50A small program account,
Preparing the development environment
Applets architecture
Small application architecture adopted double thread architecture, UI rendering a thread, JS run a thread, the advantage of the single thread is compared to the H5 JS run will not obstruct to the UI rendering, but there is a communication between threads of consumption, also is a small program setState can’t unrestrained use of reason, there is no discuss the underlying principle of technology, There will be a separate small program architecture article, please look forward to
Development framework
MINA wechat team converted the three front-end suites of HTML + JS + CSS into WXML + WXSS + JS, so you can write small programs just like writing pages. Here, I choose the official framework of wechat + my own abstract component for development. There are many small program frameworks in the community (MPVue, WEpy, etc.), which can be written with VUE or React. There are also multi-terminal frameworks that can generate multi-terminal codes from one set of codes, such as RAx, Taro, etc. If there is a need, I can follow up a period of micro channel applet upper frame comparison.
The development tools
Wechat offers its own development tools,Wechat developer toolsDownload and install it, then create the project according to the tutorial, select the project template and fill in the APPID to associate with the project.
The product design
The most critical step in solving a problem is defining the problem. My idea for offertalk is to create an anonymous community where people can discuss offers, and to make the information on the blockchain truly immutable and user-controlled. However, ideals are often beautiful, while reality is sentimental. Later, I will publish a separate issue of blockchain-related applications. Here I made a vague functional block design for OfferTalk, because I didn’t know what I was going to end up with. It wasn’t a professional product
- 1. Mental module: One enters the advertising page and gives Offertalk a slogan expecting to bring XXXXXXXX(I didn’t have a good idea at that time)
- 2. Entry home page: Provide an offer related recommendation reading
- 3. Information retrieval: provide salary inquiry and offer article retrieval
- 4. Salary anonymous publication: Users can anonymously publish salary information
- 5. Community function: Can comment, like and forward articles related to offer and salary content
- 6. Personal center: general setting options, favorites, etc
- 7…
Module and component design
According to the above prototype design, I created a small program project, and in accordance with the static file, page, component, tool library directory design
My original idea is to break all modules using the SPA way finishing the development of the small program, and then I found that the more with more functions, the readability of the code is becoming more and more bad, in a page to switch the condition of different components also makes the page have a card, then, decisive change for MPA is implemented.
The real meaning and readability of component semantics
We usually in the component library way design, does not have a definite reference specification, with the technology stack, we use the business forms are related, if only the business component library, may according to the different business forms to define different component library layered definition, here I give a set of your own components layered abstract design, to basic components not bottom, Build a basic component library with strong compatibility; The basic component is used to encapsulate the technical component which realizes the function style polymorphism. Encapsulate business components with technical components.
Based on this, I agreed to abstract the small programs I had done, and I pulled out my own component library,bowenUI: a library of applets implemented using the native MINA framework:
Module coding
According to the module and component design, module coding, here gives the query page code implementation example
<! --pages/search/search.wxml--><view class="container">
<header title="Salary Enquiry" path="search"></header>
<! -- <view class="sub_title">
<! -- Search box -->
<view class="input_box">
<view class="input_box_left">
<image src=".. /.. /images/search.png"></image>
</view>
<view class="input_box_right">
<input class="weui-input" placeholder="Input keyword fuzzy query" bindinput="bindinput" bindblur="bindblur" value="{{value}}"
/>
</view>
</view>
<view class="searchbox">
<searchitembox data="{{itemData}}" bind:itemclick = "itemsearch"></searchitembox>
</view>
<scroll-view scroll-y="true" class="scroll-view" wx:if="{{! emptyshow}}">
<view class="ad-box">
<ad unit-id="adunit-e88152005d8158cc"></ad>
</view>
<card wx:for="{{arr}}" wx:key="{{item.id}}" infoObj="{{item}}"></card>
<footer></footer>
</scroll-view>
<empty wx:else text="Empty"></empty>
</view><! -- Filter component --><view class="filter_box" style="right:{{filterRight}}">
<image src=".. /.. /images/filter.png" class="filter" bindtap="showfilter"></image>
<view class="filter_item" bindtap="filterItem" id="0">The school recruit</view>
<view class="filter_item" bindtap="filterItem" id="1">internship</view>
</view>
Copy the code// pages/search/search.js
let net = require(".. /.. /utils/net");
let app = getApp();
Page({
/** * initial data for the page */
data: {
value: "".arr: [].emptyshow:true.itemData: ["Quickly"."Meituan"."Baidu"."Byte"."Ali"].filterRight:"-145rpx".filterItemValue: {"0":"The school recruit"."1":"Practice"}},/** * lifecycle function -- listens for page loading */
onLoad: async function (options) {
let that = this;
this.setData({
value: options.param
});
that.getinfo(that.data.value);
this.getLabel();
},
// Data acquisition API
getinfo: async function (data) {
wx.showLoading({
title: 'In the data request... ',})let that = this;
try {
let result = await net.fetch("/getinfo", data, "POST");
if (result.data.code === 1) {
if(result.data.data.length === 0){
that.setData({
emptyshow:true})}else{
that.setData({
emptyshow:false
})
}
that.setData({
arr: result.data.data,
})
} else {
wx.showToast({
title: 'Fetch failed'.icon: "none"}}})catch (error) {
wx.showToast({
icon: "none".title: 'Busy network',
})
}
wx.hideLoading({
success: (res) = >{},})},/ / back to back
back: function () {
wx.navigateBack();
}
Copy the code/* pages/search/search.wxss */
page{
height:100%;
}
.container{
height:100%;
background-color: #e6645f;
overflow: hidden;
opacity: 0.9;
}
.sub_title{
width:100%;
text-align: center;
font-size:25rpx;
font-weight: bolder;
color:white;
letter-spacing: 3rpx;
}
.input_box{
width:90%;
height:70rpx;
background: rgb(245.255.255);
margin: 30rpx auto;
margin-bottom:0;
border-radius: 10rpx;
box-shadow: 0 0 1px 1px white;
}
.searchbox{
width:90%;
margin: 15rpx auto; }...@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.filter_box{
top:350rpx
}
}
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
.filter_box{
top:350rpx
}
}
/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
.filter_box{
top:350rpx
}
}
Copy the codeThe program online
After the completion of small program development self-test, you can use development tools to submit the code, and then switch and review the version in the management end, after the review passed, the switched version online, small program can be accessed in the public network, wechat search Offertalker can access, welcome to put forward valuable opinions
conclusion
In the whole development process, experienced a true full stack development, from product conception to product design to product development implementation landing to online operation, the final output of Offertalk small program, Web management end, Node service, bowenUI small program component library, realized the independent developer is not easy, The Web manager and Node service design will be presented in a separate article.