由零开始学习小程序架构

背景，大公司占据入口流量，小程序百花齐放的2019，你如何由零开始学习小程序架构。

大纲：

1、查看亿级小程序学习源码
2、学习小程序常用API
3、构建常用的小程序基础库
4、构建自己的小程序框架

1、查看亿级小程序学习源码：

安装mumu模拟器，或者已经root的旧手机。http://mumu.163.com/
安装ES文件浏览器，微信。

安装 adb 工具
参考：
https://www.xda-developers.co...

https://developer.android.com...

在命令行运行，获得文件

adb devices

adb pull /data/data/com.tencent.mm/MicroMsg/xxxxxxxxxxxxxxxx/appbrand/pkg ./pkg

当然需要进入系统查找，那么adb如何连接mumu模拟器

【win版】

adb connect 127.0.0.1:7555
adb shell

【mac版】

adb kill-server && adb server && adb shell

进入后，cd， ls, 进入到 /data/data/com.tencent.mm/MicroMsg/

参考：

http://mumu.163.com/2017/12/1...

adb帮助说明：

adb --help

Android Debug Bridge version 1.0.40
Version 4986621
Installed as /usr/local/bin/adb

global options:

-a listen on all network interfaces, not just localhost
-d use USB device (error if multiple devices connected)
-e use TCP/IP device (error if multiple TCP/IP devices available)
-s SERIAL use device with given serial (overrides $ANDROID_SERIAL)
-t ID use device with given transport id
-H name of adb server host [default=localhost]
-P port of adb server [default=5037]
-L SOCKET listen on given socket for adb server [default=tcp:localhost:5037]

general commands:

devices [-l] list connected devices (-l for long output)
help show this help message
version show version num

networking:

connect HOST[:PORT] connect to a device via TCP/IP [default port=5555]
disconnect [HOST[:PORT]]

 disconnect from given TCP/IP device [default port=5555], or all

forward --list list all forward socket connections
forward [--no-rebind] LOCAL REMOTE

 forward socket connection using:
   tcp: ( may be "tcp:0" to pick any open port)
   localabstract:
   localreserved:
   localfilesystem:
   dev:
   jdwp: (remote only)

forward --remove LOCAL remove specific forward socket connection
forward --remove-all remove all forward socket connections
ppp TTY [PARAMETER...] run PPP over USB
reverse --list list all reverse socket connections from device
reverse [--no-rebind] REMOTE LOCAL

 reverse socket connection using:
   tcp: ( may be "tcp:0" to pick any open port)
   localabstract:
   localreserved:
   localfilesystem:

reverse --remove REMOTE remove specific reverse socket connection
reverse --remove-all remove all reverse socket connections from device

file transfer:

push [--sync] LOCAL... REMOTE

 copy local files/directories to device
 --sync: only push files that are newer on the host than the device

pull [-a] REMOTE... LOCAL

 copy files/dirs from device
 -a: preserve file timestamp and mode

 sync a local build from $ANDROID_PRODUCT_OUT to the device (default all)
 -l: list but don't copy

shell:

shell [-e ESCAPE] [-n] [-Tt] [-x] [COMMAND...]

 run remote shell command (interactive shell if no command given)
 -e: choose escape character, or "none"; default '~'
 -n: don't read from stdin
 -T: disable PTY allocation
 -t: force PTY allocation
 -x: disable remote exit codes and stdout/stderr separation

emu COMMAND run emulator console command

app installation:

install [-lrtsdg] [--instant] PACKAGE
install-multiple [-lrtsdpg] [--instant] PACKAGE...

 push package(s) to the device and install them
 -l: forward lock application
 -r: replace existing application
 -t: allow test packages
 -s: install application on sdcard
 -d: allow version code downgrade (debuggable packages only)
 -p: partial application install (install-multiple only)
 -g: grant all runtime permissions
 --instant: cause the app to be installed as an ephemeral install app

uninstall [-k] PACKAGE

 remove this app package from the device
 '-k': keep the data and cache directories

backup/restore:

to show usage run "adb shell bu help"

debugging:

bugreport [PATH]

 write bugreport to given PATH [default=bugreport.zip];
 if PATH is a directory, the bug report is saved in that directory.
 devices that don't support zipped bug reports output to stdout.

jdwp list pids of processes hosting a JDWP transport
logcat show device log (logcat --help for more)

security:

disable-verity disable dm-verity checking on userdebug builds
enable-verity re-enable dm-verity checking on userdebug builds
keygen FILE

 generate adb public/private key; private key stored in FILE,
 public key stored in FILE.pub (existing files overwritten)

scripting:

wait-for[-TRANSPORT]-STATE

 wait for device to be in the given state
 State: device, recovery, sideload, or bootloader
 Transport: usb, local, or any [default=any]

 reboot the device; defaults to booting system image but
 supports bootloader and recovery too. sideload reboots
 into recovery and automatically starts sideload mode,
 sideload-auto-reboot is the same but reboots after sideloading.

sideload OTAPACKAGE sideload the given full OTA package
root restart adbd with root permissions
unroot restart adbd without root permissions
usb restart adb server listening on USB
tcpip PORT restart adb server listening on TCP on PORT

internal debugging:

start-server ensure that there is a server running
kill-server kill the server if it is running
reconnect kick connection from host side to force reconnect
reconnect device kick connection from device side to force reconnect
reconnect offline reset offline/unauthorized devices to force reconnect

environment variables:

$ADB_TRACE

 comma-separated list of debug info to log:
 all,adb,sockets,packets,rwx,usb,sync,sysdeps,transport,jdwp

$ADB_VENDOR_KEYS colon-separated list of keys (files or directories)
$ANDROID_SERIAL serial number to connect to (see -s)
$ANDROID_LOG_TAGS tags to be used by logcat (see logcat --help)

接下来使用wxappUnpacker 反编译

2、学习小程序常用API

像浏览器一样，小程序少不了学习文档：

教程 | 《小程序开发指南》

全局变量 App , Page, Component,
getApp, global, getCurrentPages, wx

其中 wx 308 个，提供各种桥接服务。

wx.drawCanvas
wx.createContext
wx.createCanvasContext
wx.canvasToTempFilePath
wx.canvasGetImageData
wx.canvasPutImageData
wx.getAccountInfoSync
wx.getShareInfo
wx.pageScrollTo
wx.chooseInvoiceTitle
wx.chooseInvoice
wx.arrayBufferToBase64
wx.base64ToArrayBuffer
wx.openSetting
wx.getExtConfig
wx.chooseMedia
wx.chooseMultiMedia
wx.chooseWeChatContact
wx.uploadEncryptedFileToCDN
wx.onUploadEncryptedFileToCDNProgress
wx.getExtConfigSync
wx.showShareMenu
wx.hideShareMenu
wx.updateShareMenu
wx.shareAppMessageForFakeNative
wx.openUrl
wx.setNavigationBarColor
wx.setNavigationBarAlpha
wx.vibrateShort
wx.vibrateLong
wx.getSetting
wx.checkIsSupportFacialRecognition
wx.startFacialRecognitionVerify
wx.startFacialRecognitionVerifyAndUploadVideo
wx.startCustomFacialRecognitionVerify
wx.startCustomFacialRecognitionVerifyAndUploadVideo
wx.sendBizRedPacket
wx.sendGoldenRedPacket
wx.openGoldenRedPacketDetail
wx.addPhoneContact
wx.setScreenBrightness
wx.getScreenBrightness
wx.getWeRunData
wx.uploadWeRunData
wx.addWeRunData
wx.canIUse
wx.setPageStyle
wx.triggerGettingWidgetData
wx.navigateToMiniProgram
wx.navigateToDevMiniProgram
wx.navigateBackMiniProgram
wx.setNavigationBarRightButton
wx.onTapNavigationBarRightButton
wx.setTopBarText
wx.setTabBarBadge
wx.removeTabBarBadge
wx.showTabBarRedDot
wx.hideTabBarRedDot
wx.showTabBar
wx.hideTabBar
wx.setTabBarStyle
wx.setTabBarItem
wx.setBackgroundColor
wx.setBackgroundTextStyle
wx.setEnableDebug
wx.captureScreen
wx.onUserCaptureScreen
wx.setKeepScreenOn
wx.checkIsSupportSoterAuthentication
wx.startSoterAuthentication
wx.checkIsSoterEnrolledInDevice
wx.openDeliveryList
wx.reportIDKey
wx.reportKeyValue
wx.setNavigationBarTitle
wx.showNavigationBarLoading
wx.hideNavigationBarLoading
wx.startPullDownRefresh
wx.stopPullDownRefresh
wx.operateWXData
wx.getOpenDeviceId
wx.getMenuButtonBoundingClientRect
wx.openBluetoothAdapter
wx.closeBluetoothAdapter
wx.getBluetoothAdapterState
wx.onBluetoothAdapterStateChange
wx.startBluetoothDevicesDiscovery
wx.stopBluetoothDevicesDiscovery
wx.getBluetoothDevices
wx.getConnectedBluetoothDevices
wx.createBLEConnection
wx.closeBLEConnection
wx.getBLEDeviceServices
wx.getBLEDeviceCharacteristics
wx.notifyBLECharacteristicValueChanged
wx.notifyBLECharacteristicValueChange
wx.readBLECharacteristicValue
wx.writeBLECharacteristicValue
wx.onBluetoothDeviceFound
wx.onBLEConnectionStateChanged
wx.onBLEConnectionStateChange
wx.onBLECharacteristicValueChange
wx.startBeaconDiscovery
wx.stopBeaconDiscovery
wx.getBeacons
wx.onBeaconUpdate
wx.onBeaconServiceChange
wx.startWifi
wx.stopWifi
wx.getWifiList
wx.getConnectedWifi
wx.connectWifi
wx.presetWifiList
wx.setWifiList
wx.onGetWifiList
wx.onWifiConnected
wx.onEvaluateWifi
wx.getHCEState
wx.startHCE
wx.stopHCE
wx.sendHCEMessage
wx.onHCEMessage
wx.startLocalServiceDiscovery
wx.stopLocalServiceDiscovery
wx.onLocalServiceFound
wx.offLocalServiceFound
wx.onLocalServiceLost
wx.offLocalServiceLost
wx.onLocalServiceDiscoveryStop
wx.offLocalServiceDiscoveryStop
wx.onLocalServiceResolveFail
wx.offLocalServiceResolveFail
wx.redirectTo
wx.reLaunch
wx.navigateTo
wx.switchTab
wx.navigateBack
wx.onAppShow
wx.offAppShow
wx.onAppHide
wx.offAppHide
wx.onError
wx.offError
wx.getLaunchOptionsSync
wx.onWindowResize
wx.offWindowResize
wx.getStorage
wx.getStorageSync
wx.setStorage
wx.setStorageSync
wx.removeStorage
wx.removeStorageSync
wx.clearStorage
wx.clearStorageSync
wx.getStorageInfo
wx.getStorageInfoSync
wx.request
wx.connectSocket
wx.closeSocket
wx.sendSocketMessage
wx.onSocketOpen
wx.onSocketClose
wx.onSocketMessage
wx.onSocketError
wx.uploadFile
wx.downloadFile
wx.addNativeDownloadTask
wx.calRqt
wx.secureTunnel
wx.chooseImage
wx.previewImage
wx.getImageInfo
wx.saveImageToPhotosAlbum
wx.compressImage
wx.startRecord
wx.stopRecord
wx.playVoice
wx.pauseVoice
wx.stopVoice
wx.onVoicePlayEnd
wx.chooseVideo
wx.saveVideoToPhotosAlbum
wx.loadFontFace
wx.getLocation
wx.openLocation
wx.chooseLocation
wx.startLocationUpdate
wx.stopLocationUpdate
wx.onLocationChange
wx.getNetworkType
wx.onNetworkStatusChange
wx.getSystemInfo
wx.getSystemInfoSync
wx.getBatteryInfo
wx.getBatteryInfoSync
wx.startAccelerometer
wx.stopAccelerometer
wx.onAccelerometerChange
wx.startCompass
wx.stopCompass
wx.onCompassChange
wx.startDeviceMotionListening
wx.stopDeviceMotionListening
wx.onDeviceMotionChange
wx.startGyroscope
wx.stopGyroscope
wx.onGyroscopeChange
wx.reportAction
wx.getBackgroundAudioManager
wx.getRecorderManager
wx.getBackgroundAudioPlayerState
wx.playBackgroundAudio
wx.pauseBackgroundAudio
wx.seekBackgroundAudio
wx.stopBackgroundAudio
wx.onBackgroundAudioPlay
wx.onBackgroundAudioPause
wx.onBackgroundAudioStop
wx.joinVoIPChat
wx.exitVoIPChat
wx.updateVoIPChatMuteConfig
wx.onVoIPChatMembersChanged
wx.onVoIPChatSpeakersChanged
wx.onVoIPChatInterrupted
wx.login
wx.checkSession
wx.authorize
wx.getUserInfo
wx.requestPayment
wx.verifyPaymentPassword
wx.bindPaymentCard
wx.requestPaymentToBank
wx.requestVirtualPayment
wx.openOfflinePayView
wx.openWCPayCardList
wx.requestMallPayment
wx.faceVerifyForPay
wx.addCard
wx.openCard
wx.scanCode
wx.openQRCode
wx.chooseAddress
wx.saveFile
wx.openDocument
wx.getSavedFileList
wx.getSavedFileInfo
wx.getFileInfo
wx.removeSavedFile
wx.getFileSystemManager
wx.chooseContact
wx.removeUserCloudStorage
wx.setUserCloudStorage
wx.makePhoneCall
wx.makeVoIPCall
wx.onAppRoute
wx.onAppRouteDone
wx.onAppEnterBackground
wx.onAppEnterForeground
wx.onAppUnhang
wx.onPageReload
wx.onPageNotFound
wx.offPageNotFound
wx.createAnimation
wx.createInnerAudioContext
wx.getAvailableAudioSources
wx.setInnerAudioOption
wx.createAudioContext
wx.createVideoContext
wx.createMapContext
wx.createCameraContext
wx.createLivePlayerContext
wx.createLivePusherContext
wx.onWebviewEvent
wx.onNativeEvent
wx.hideKeyboard
wx.getPublicLibVersion
wx.showModal
wx.showToast
wx.hideToast
wx.showLoading
wx.hideLoading
wx.showActionSheet
wx.reportAnalytics
wx.reportMonitor
wx.getClipboardData
wx.setClipboardData
wx.createSelectorQuery
wx.createIntersectionObserver
wx.nextTick
wx.updatePerfData
wx.traceEvent
wx.onMemoryWarning
wx.getUpdateManager
wx.createWorker
wx.voiceSplitJoint
wx.uploadSilkVoice
wx.downloadSilkVoice
wx.getResPath
wx.setResPath
wx.setCookies
wx.getCookies
wx.getLabInfo
wx.setLabInfo
wx.env
wx.getLogManager
wx.cloud
wx.version
wx.enterContact

3、构建常用的小程序基础库

常用库，一般地为各种函数，如时间封装，wxs，等
与js 基础库差不多。

假如需要进行封装并 npm 分享可以使用以下webpack配置打包，

要注意的是 libraryTarget: 'commonjs2'

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'whybug.min.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

4、构建自己的小程序框架

造轮子，当然也是先参考别人怎么造，难道自己去捡。
进行各种模仿，当然也可以分为封装形框架，和转换型框架。

封装形框架根封装小程序函数类似。转换型需要用到Ast工具。假如可以的话，你可以用任意语言来写js，或者小程序。目前主流方向都是 Vue 和 react 技术栈, Ts等。

结语：

小程序，划重点小，方便。

祝你秒杀对手。

原文连接： https://github.com/icai/icai.github.io/issues/4