"0 to 1 Practice Series" develops, operates and maintains an independent WeChat applet

background

I think I haven't written an article in the Nuggets for a long time, and I haven't posted some of my own opinions, technical growth and other related content on my blog . This may have something to do with my progress from a student to a worker, and I work overtime every day to move bricks. In fact, I have made a lot of small things that I find interesting. I want to organize these small things into a "0 to 1 practice" series. , I hope to find inspiration for myself by sharing the design implementation process, and it is my honor to help students who are doing this development. The first thing I think I can share is OfferTalk: the platform of offer talk. Everyone here must use offershow, and I also use it. The inspiration for my design and development of Offertalk comes from it, but I think offershow is a bit single, at least a year ago. I felt this way when I was preparing for the school recruitment, so I started to offerTalk. At that time, I had this idea and I used it intermittently for about two months. Then I will design, implement, launch, and operate. process to share. The development and implementation process of the offertalk applet will be divided into three parts, namely the applet front-end, web management end, node server, today is the applet management end, the process will be mixed with product thinking, technical details, technology precipitation wait a minute

various preparations

As we all know, the WeChat applet was officially released in 2016. It has a unique advantage in that it relies on WeChat endorsement and comes with a large amount of traffic. If you are lucky, it may become popular. Before developing WeChat Mini Programs, you need to prepare the following items:

Mini Program Account Application

There is an email account that has never been registered on the WeChat development platform. The user registers the applet. The process of registering the WeChat applet is as follows: After clicking Register, the administrator who fills in the applet will generally scan the code with his own WeChat. That’s it, note that a personal account can only be bound to a maximum of 5 Mini Program accounts, and an enterprise user account can be bound to a maximum of 50 Mini Program accounts. After the Mini Program account is successfully registered, you can enter the background management of the Mini Program. In the background management, you can manage the basic settings, and you can view various data of the applet

Prepare the development environment

applet architecture

The architecture of the applet adopts a dual-threaded architecture, one thread for UI rendering, and one thread for JS to run. Compared with H5, the single-threaded advantage is that the running of js will not hinder the rendering of UI, but there is a consumption of communication between threads. That is why the setState of the applet cannot be used without restraint. The underlying principles of the technology are not discussed here. A separate article on the architecture of the applet will be published in the future. Please look forward to it.

Development Framework

Students who are familiar with the front-end can easily get started with the applet. The applet has its own official development framework. The MINA WeChat team converts the three front-end suites html+js+css into wxml+wxss+js, and can write the applet just like writing a page. Here I choose the official framework of WeChat + abstract components to develop. There are many small program frameworks (mpvue, wepy, etc.) in the community, which can be written in vue or react. Code multi-terminal code, such as rax, taro, etc., the comparison of the framework will not be carried out here. If necessary, I can follow up with a comparison of the upper-level framework of the WeChat applet.

development tools

WeChat provides its own development tools. You can download and install the WeChat developer tools . Follow the tutorial to create a project. Select the project template and fill in the appid to associate with the project.

product design

The most critical step for us to solve the problem is to define the problem. My idea of ​​the offertalk applet is to be able to create an anonymous community where everyone can discuss offers, and to be able to put the information on the blockchain (blockchain), so as to be truly immutable and User control. But often the ideal is beautiful, and the reality is skinny. Later, I will publish a separate application related to blockchain. Here I made a vague functional module design for offertalk, because at the time I didn't know what to do in the end, after all, it's not a professional product

• 1. Mental module: One enters the advertisement page, puts a slogan on the offertalk, and expects to bring XXXXXXXX (I never thought about it at the time)
• 2. Entrance home page: Provide an offer-related recommended reading
• 3. Information retrieval: provide salary query and offer article retrieval
• 4. Anonymous salary release: Users can publish salary information anonymously
• 5.社区功能：能够对offer相关文章，薪资内容进行评论，点赞，转发
• 6.个人中心：常规设置选项，收藏等
• 7....

模块及组件设计

按照上面的原型设计，我新建了小程序项目，并按照静态文件，页面，组件，工具库的方式进行了代码库目录设计
我最初的想法是将所有模块拆开利用SPA的方式完成整个小程序的开发，后来我发现，随着功能的越加越多，代码的可读性变得越来越差，在一个页面里面切换不同组件的状态也使得页面有一定的卡顿，在这时，果断换为了MPA的实现方式。

组件语义化的真实意义及可读性的实践

通常我们在进行组件库才分设计的时候，并没有一个明确的可参考的规范，跟我们使用的技术栈，业务形态都相关，如果只是业务组件库，可能根据不同的业务形态能够定义出不同的组件库分层定义，这里我给出一套自己的组件分层抽象设计的方式，以基础组件未底，构建兼容性强的基础组件库；往上利用基础组件封装实现功能样式多态的技术组件；利用技术组件封装业务组件。
基于此，我将自己做过的小程序进行同意抽象，抽离出了一套自己的组件库，bowenUI ：一个用原生MINA框架实现的小程序组件库： 我认为组件应该极大可能的以纯函数类型出现，给定输入会返回确定输出；不受外界依赖影响；所以，我在每个基础组件下创建了一个readme来对组件进行函数式解读，同时也增加可读性和可维护性。

模块编码

按照模块及组件设计，进行模块编码，这里给出查询页面的代码实现示例

<!--pages/search/search.wxml-->
<view class="container">
  <header title="薪资查询" path="search"></header>
  <!-- <view class="sub_title">查薪资，上offer说</view> -->
  <!-- 搜索框 -->
  <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="输入关键字模糊查询" 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 组件 -->
<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">校招</view>
  <view class="filter_item" bindtap="filterItem" id="1">实习</view>
</view>
复制代码

// pages/search/search.js
let net = require("../../utils/net");
let app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    value: "",
    arr: [],
    emptyshow:true,
    itemData:["快手","美团","百度","字节","阿里"],
    filterRight:"-145rpx",
    filterItemValue:{
      "0":"校招",
      "1":"实习"
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    let that = this;
    this.setData({
      value: options.param
    });
    that.getinfo(that.data.value);
    this.getLabel();
  },
  // 数据获取api
  getinfo: async function (data) {
    wx.showLoading({
      title: '数据请求中...',
    })
    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: '获取失败',
          icon: "none"
        })
      }

    } catch (error) {
      wx.showToast({
        icon: "none",
        title: '网络繁忙',
      })
    }
    wx.hideLoading({
      success: (res) => {
        
      },
    })
  },
  // 回退
  back: function () {
    wx.navigateBack();
  }
复制代码

/* 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
  }
}
复制代码

程序上线

小程序完成开发自测后，便可借助开发工具进行代码的提交，然后在管理端进行版本的切换与提审，审核通过以后，切换版本上线，小程序便可在公网访问了，微信搜索offertalker就能访问了，欢迎提出宝贵意见

总结

During the whole development process, I experienced a true full-stack development, from product conception to product design to product development implementation to online operation, and finally produced offertalk applet, web management terminal, node service, bowenUI applet The component library realizes the difficulty of independent developers, and the web management and node service design will be shown in another article.