preface

  • Project Background and Implementation (skipped)
  • Small program development related
  • Applets Generic Template (posted on Github, end of article)

Project background (reading will make you sleepy, can skip to see the development related)

Before project development:

Company has its own repair centers, dealers and repair station master cannot solve things, will send to maintenance center, the product by the repair center processing, processing mainly has the several steps, warehousing, inspection, quotation results (the client need to confirm the price), maintenance, the re-inspection, packaging, outbound.

Pain point scenario:

  1. Testing and maintenance items are recorded on paper, which is cumbersome and difficult to store
  2. Communication costs are too high when testing and maintenance are carried out by different masters
  3. After the test is completed, the quotation shall be calculated according to the maintenance project and the spare parts used, and then contact the entrusting party for confirmation. The whole process is completed manually, which is too time consuming
  4. Synchronization assistance between ERP system, CSS (after-sales system), WMS, etc.
  5. .

Project Composition:

  1. Small procedures, mainly for the use of maintenance center staff
  2. After-sales management background, company after-sales department, maintenance center, entrusting party (maintenance station or dealer)

Small programs are mainly after-sale management background “maintenance center” module function replacement, maintenance center staff because of running around, mobile phones must be more convenient than PC

Project specific implementation (read will be sleepy, can skip to see development related)

Small program with the management background is mainly to simplify the process, more refined management of the whole maintenance process.

  1. The maintenance station (client) creates a repair application form through the management background, which is approved by the maintenance center administrator. The maintenance station (client) sends the products to the maintenance center through logistics, records the logistics number in the repair form, and the system automatically generates the warehouse entry form
  2. Maintenance centre staff, sweep through a small program code delivery packaging logistics single number “one dimensional code”, directly find the receipt, check the number of products, and to give each product labeled repair yards “one-dimensional code”, no problem, click the “sign for confirmation, the system automatically create mechanic single (testing, maintenance, review, packaging is the same guy, It can be understood as the task separated from the maintenance work order)
  3. When testing personnel need to test, they directly go to the warehouse to get the products, and then scan the maintenance code pasted on it through the mini-program to find the maintenance work order for testing, record the testing results in the mini-program, and add the spare parts and maintenance items that need to be replaced. The system generates a quotation, which will list the cost of spare parts and maintenance items.
  4. The quotation needs to be approved by the entrusting party in the system. If agreed, the next step, maintenance, can be carried out.
  5. Through the small program, the maintenance master can scan the maintenance code of the product, find the maintenance work order and start the maintenance work. Input test results, replacement spare parts and maintenance items. Click the repair completed, you can proceed to the next step, reinspection
  6. If the reinspection fails, go back to the previous step and continue maintenance. If the reinspection fails, go to the next step and pack
  7. The package is finished, the small program click the package to confirm.
  8. Finally, the warehouse, maintenance center management can be in the management back table, combined with the maintenance work order generated by the same client (each maintenance work order corresponds to a product), and then generate the warehouse order.
  9. According to the product information in the warehouse release form, the maintenance center will release the warehouse uniformly. Send it back to the entrusting party and click “Exit confirmation” in the mini program.

Note: “scan code” is not necessary, just to save the time for the staff to find the order, these are just the general process of the project, there are many details will not be described.

Technology stack selection:

Personal front-end dregs, mainly responsible for the front-end development of small programs based on dingding, management background will occasionally help. Here only small program, nail small program and micro channel small program roughly the same, syntax and API are similar, last organized small program general version, a little change, basically applicable.

  • Pin Pin Small program General template (modified from wechat small program general template)
  • Component library: Mini-Ali-UI-Rpx (RPX unit version of Mini-Ali-UI, developed by Alipay small program team)

Nail nail small program and micro channel small program some differences (mainly the development of the basic point will use)

  • Use setData, not this.data. XXX, even if you don’t need to refresh the view. Otherwise, when re-entering the interface, the data in the data cannot be initialized, or the data modified last time, sometimes there will be all kinds of weird situations, such as: Small programs freeze, crash, no response, etc. Wechat small programs do not, you do not need to refresh the view, through this.data. XXX to modify the data is not good

  • Request initiation API: wechat small program wx.request, Dingdingsmall program dd. HttpRequest, this aspect, wechat API does better than Dingding.com

    • dd.httpRequest:
      • Only supportGET,POST;
      • Url parameters are not automatically serialized;
      • For exception handling, the status code is not2xxFor example, 5xx, 4XX, request format error, or request failurefailWe’re gonna do it inside.
    • wx.request
      • GET,POST,PUT,DELETEAnd so on;
      • Whether to enable the configurationhttp2, cache,quicAnd so on;
      • Url parameters are automatically serialized (note the format of array serialization).
      • For exception handling, the status code is2xx 、5xx 、4xxWhen, put insuccessInside, wechat should be defined like this, because the request and response are completed, so are placedsuccess; If the request format is incorrect or the request fails, it is considered as an exceptionfailWe’re gonna do it inside.
    • Exception handling, the recommendation is to encapsulate it in a function, write it in a general, unified way,suceessandfailIs called in.

  • Dd. setStorage, dD. setStorageSync, etc., parameters are {key: XXX,data: XXX} to pass, wechat cache API in addition to writing, Wx.setstoragesync (‘key’, ‘value’) is also used

  • This. SelectComponent (‘ selector ‘) gets child component instances. Pins can only be obtained indirectly. We know that the child component can call the parent component’s function and pass arguments. We can pass the instance of the child component (this) as an argument to the parent. / / example:

    / / the parent component
// father.axml
// Use the child component and pass the onGetInstance method
  <child onGetInstance="onGetInstance"></child>

//father.js
onGetInstance(instance){
    console.log(instance) //instance is an instance
}

/ / child component
//child.js
// After the child is mounted, call onGetInstance to pass the child's this to the parent element
didMount() {
  this.props.onGetInstance(this)}Copy the code

  • There is no styleIsolation for the pinning component. The styles written on page will be applied to the component. Wechat has styleIsolation by default, and different styleIsolation modes can be configured through styleIsolation.

  • Dingding does not have program subcontracting, but wechat does. It is also a feature created for the ToC side user experience to improve the loading speed of the first open

  • “Dingpin enterprise internal small program”, no secret login (without user authorization, can directly access to the information of employees), without audit, if your company just use Dingpin, based on dingpin to develop internal applications is a good choice. You can also assign applet permissions based on the enterprise section. Wechat small program because it is ToC oriented, positioning is not the same, natural in these aspects have no comparison. Enterprise wechat is also beginning to support small programs, you can study it when you have time.

There are also some minor API details that I won’t compare. On the whole, in addition to some “Dingding” and “wechat” in the special API, the two platforms have those, the basic function of wechat is more perfect and powerful. This is also understandable, after all, micro channel and Dingdingsmall program “number of users”, “platform attributes”, “service groups” are different.

Nailing small program some points to pay attention to

  • Nail nail small program developer tools, strongly recommended to download the latest version, project build preview speed is much faster, low version of some strange bugs.

  • Nail nail small program ecological community in general, component library, plug-in options are not much

  • Dingding small program uses the mini-Ali-UI component library. You need to go to Alipay to see the development document. Part of The API of Alipay is common to Dingding

  • Small program development tool, DD can be replaced with my

  • Be sure to check “Component2” otherwise “Controlled Properties” won’t work.

  • – When adding content dynamically in the Mini-Ali-UI Collapse component, heights will not adapt, they will have to Collapse and then open to accommodate heights. In order to solve this bug, I went to the source code and found that I could call the method in am-collapse-updates-collapse to refresh the view. In my project, I used a lot of collapse components, so I simply wrapped a method, refer to the following:

      	// Refresh Collapse view
  	// collapsKeys collapse-item key
  	export function updateCollapse(. collapsKeys) {
  		collapsKeys.forEach(x= > {
  			let index = null
  			if (this[`am-collapse-ids-collapse`]) {
  				index = this[`am-collapse-ids-collapse`].findIndex(y= > y === x)	
  			}
  			if (index || index === 0) {
  				try {
  					this[`am-collapse-updates-collapse`][index]()
  				} catch (error) {
  					console.log(error)
  				}
  			}
  		})

  	}

Copy the code

    Common Template for Small Program “Enterprise Internal Application”

    And last time “wechat general template”, take some time to tidy up, interested can go to “Github” to view the pull

    • “Universal Template for Small Programs”
    • “Universal Template of wechat Small Program”