"0 to 1 Practice Series" desarrolla, opera y mantiene un subprograma WeChat independiente

antecedentes

Creo que no he escrito un artículo en los Nuggets durante mucho tiempo y no he publicado algunas de mis propias opiniones, crecimiento técnico y otro contenido relacionado en mi blog . Esto puede tener algo que ver con mi progreso de estudiante a trabajador, y trabajo horas extra todos los días para mover ladrillos. De hecho, he hecho muchas cosas pequeñas que encuentro interesantes. Quiero organizar estas pequeñas cosas en una serie de "práctica 0 a 1". Espero encontrar inspiración para mí compartiendo el proceso de implementación del diseño, y es un honor para mí ayudar a los estudiantes que están haciendo este desarrollo. Lo primero que creo que puedo compartir es OfferTalk: la plataforma de Offer Talk. Todos aquí deben usar OfferShow, y yo también lo uso. La inspiración para mi diseño y desarrollo de OfferTalk viene de ahí, pero creo que OfferShow es un poco simple. , hace al menos un año. Me sentí así cuando me estaba preparando para el reclutamiento de la escuela, así que comencé a ofrecer Talk. En ese momento, tuve esta idea y la usé de manera intermitente durante aproximadamente dos meses. Luego diseñaré, implementaré , lanzar y operar proceso para compartir. El proceso de desarrollo e implementación del applet de offertalk se dividirá en tres partes, a saber, el front-end del applet, el extremo de administración web, el servidor de nodo, hoy es el extremo de administración del applet, el proceso se combinará con el pensamiento del producto, detalles técnicos, tecnología precipitación espera un minuto

varias preparaciones

Como todos sabemos, el subprograma WeChat se lanzó oficialmente en 2016. Tiene la ventaja única de que depende del respaldo de WeChat y viene con una gran cantidad de tráfico. Si tiene suerte, puede volverse popular. Antes de desarrollar los miniprogramas de WeChat, debe preparar los siguientes elementos:

Solicitud de Cuenta del Mini Programa

Hay una cuenta de correo electrónico que nunca se ha registrado en la plataforma de desarrollo WeChat. El usuario registra el subprograma. El proceso de registro del subprograma WeChat es el siguiente: Después de hacer clic en Registrar, el administrador que completa el subprograma generalmente escaneará el código con su propio WeChat. Eso es todo, tenga en cuenta que una cuenta personal solo puede vincularse a un máximo de 5 cuentas del Mini Programa, y ​​una cuenta de usuario empresarial puede vincularse a un máximo de 50 cuentas del Mini Programa. Después de que la cuenta del Mini Programa se haya registrado correctamente , puede ingresar a la administración en segundo plano del Mini Programa. En la administración en segundo plano, puede administrar la configuración básica y puede ver varios datos del subprograma

Preparar el entorno de desarrollo

arquitectura de applets

La arquitectura del applet adopta una arquitectura de subproceso doble, un subproceso para la representación de la interfaz de usuario y un subproceso para que se ejecute JS. En comparación con H5, la ventaja de subproceso único es que la ejecución de js no obstaculizará la representación de la interfaz de usuario, pero hay un consumo de comunicación entre subprocesos. Es por eso que el setState del applet no se puede usar sin restricciones. Los principios subyacentes de la tecnología no se discuten aquí. Un artículo separado sobre la arquitectura del applet se publicará en el futuro. Por favor, espérelo.

marco de desarrollo

Los estudiantes que están familiarizados con el front-end pueden comenzar fácilmente con el applet. El applet tiene su propio marco de desarrollo oficial. El equipo de WeChat de MINA convierte las tres suites de front-end html+js+css en wxml+wxss+js, y puede escribir el applet como si estuviera escribiendo una página. Aquí elijo el marco oficial de WeChat + componentes abstractos para desarrollar. Hay muchos marcos de programas pequeños (mpvue, wepy, etc.) en la comunidad, que se pueden escribir en vue o reaccionar. Codifique código multiterminal, como rax , taro, etc., la comparación del marco no se llevará a cabo aquí. Si es necesario, puedo continuar con una comparación del marco de nivel superior del subprograma WeChat.

herramientas de desarrollo

WeChat proporciona sus propias herramientas de desarrollo. Puede descargar e instalar las herramientas de desarrollo de WeChat . Siga el tutorial para crear un proyecto. Seleccione la plantilla del proyecto y complete el ID de aplicación para asociarlo con el proyecto.

diseño de producto

El paso más crítico para nosotros para resolver el problema es definir el problema. Mi idea para el applet de offertalk es que sea una comunidad anónima donde todos puedan discutir ofertas y poner información en la cadena de bloques (blockchain), haciéndola verdaderamente inmutable y Control de usuario. Pero a menudo lo ideal es hermoso y la realidad es flaca Más adelante, publicaré una aplicación separada relacionada con blockchain. Aquí hice un diseño de módulo funcional vago para offertalk, porque en ese momento no sabía qué hacer al final, después de todo, no es un producto profesional.

• 1. Módulo mental: uno ingresa a la página de anuncios, pone un eslogan en la oferta y espera traer XXXXXXXX (nunca lo pensé en ese momento)
• 2. Página de inicio de entrada: Proporcione una lectura recomendada relacionada con la oferta
• 3. Recuperación de información: proporcionar consulta de salario y recuperación de artículo de oferta
• 4. Publicación anónima de salarios: los usuarios pueden publicar información salarial de forma anónima
• 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就能访问了，欢迎提出宝贵意见

总结

En todo el proceso de desarrollo, experimenté un verdadero desarrollo de pila completa, desde la concepción del producto hasta el diseño del producto, la implementación del desarrollo del producto y la operación en línea, y finalmente produje el applet de oferta, la terminal de administración web, el servicio de nodo, el applet bowenUI. La biblioteca de componentes se da cuenta de la dificultad. de desarrolladores independientes, y la gestión web y el diseño de servicios de nodos se mostrarán en otro artículo.