由零开始学习小程序架构
背景,大公司占据入口流量,小程序百花齐放的2019,你如何由零开始学习小程序架构。
大纲:
1、查看亿级小程序学习源码
2、学习小程序常用API
3、构建常用的小程序基础库
4、构建自己的小程序框架
1、查看亿级小程序学习源码:
安装mumu模拟器,或者已经root的旧手机。http://mumu.163.com/
安装ES文件浏览器,微信。
安装 adb 工具
参考:
https://www.xda-developers.com/install-adb-windows-macos-linux/
https://developer.android.com/studio/command-line/adb
在命令行运行,获得文件
adb devicesadb 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/19/25241_730476.html?type=notice
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 [all|data|odm|oem|product|system|vendor]
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]
get-state print offline | bootloader | device
get-serialno print
get-devpath print
remount remount partitions read-write
reboot [bootloader|recovery|sideload|sideload-auto-reboot]
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 技术栈。
结语:
小程序,划重点小,方便。
祝你秒杀对手。
原文连接: #4
由零开始学习小程序架构相关推荐
- 让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析
简介:mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放.不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App.支付宝.钉钉甚至其他小程序开放平台. ...
- 局部配置和全局配置_06. 教你零基础搭建小程序(解读全局配置文件-tabBar字段)...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...
- 视频教程-5小时零基础入门小程序云开发-微信开发
5小时零基础入门小程序云开发 码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥29.0 ...
- 【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
- 一起脱去小程序的外套和内衣 - 微信小程序架构解析
推荐理由: 微信小程序从一出现就引起很多人的关注,它的公测就掀起了学习小程序开发的浪潮:今天在微信公众平台看到一条公告,小程序开始开放个人开发者申请注册,个人用户可以访问微信公众平台,扫码验证个人身份 ...
- 视频教程-从零开发微信小程序-微信开发
从零开发微信小程序 目前就职于中国唯品会做iOS开发工程师,在良师益友网,麦子学院任职iOS讲师,出版iOS编程学习书籍<7天玩转iOS界面开发>,<初级到AppStore上架> ...
- 零基础微信小程序Day1
文章目录 一.前言 二.下载和注册 三.认识界面 四.小程序组件 五.结尾 一.前言 学习目的(purpose):学会制作一款微信小程序,为今后毕设做准备. 背景介绍(introduction):计科 ...
- 零基础学小程序006(后台数据的获取与解析)----请求服务器json数据展现到小程序上
视频讲解地址:https://edu.csdn.net/course/play/9531/265552 小程序云开发讲解视频:https://edu.csdn.net/course/detail/96 ...
- June:Datawhale开源学习小程序升级啦!
1. 开源学习小程序的使用 我们通过七个视频来介绍如何使用Datawhale开源学习小程序. 第一个视频:完善个人信息+报名 组队学习报名前,请大家完善个人信息的填写,便于结课后证书发放. 切换到组队 ...
- 六一:如何在Datawhale开源学习小程序中管
我们的组队学习马上就要开营了,本次组队学习与以往不同的是小程序中增加了队伍管理的功能. 为了方便大家组队,Datawhale的 六一同学 为大家准备了在Datawhale开源学习小程序中队伍管理的教程 ...
最新文章
- 简单的apache URL重写
- [Qt教程] 第11篇 2D绘图(一)绘制简单图形
- SQL中跨服务器查询
- 自定义注解与validation结合使用案例
- 文件操作的小tips
- hashmap怎么取值_HashMap?面试?我是谁?我在哪?我会啥?
- mysql中最常用的存储引擎有_mysql常用的存储引擎有哪些
- 相机模型与标定(五)--opencv棋盘格角点检测算法
- Hive 求全局Top N
- php文件之间传值的三种主流并且常用的方式
- TensorFlow by Google过拟合优化 Machine Learning Foundations: Ep #7 - Image augmentation and overfitting
- Raki的读paper小记:An Effective Transition-based Model for Discontinuous NER
- matlab 2017安装教程
- java+selnium爬取凡人修仙传
- 税务信息化与计算机技术应用开发,税务信息化与计算机技术应用开发工作岗位年度个人工作总结...
- [Java教程 00] 计算机基础
- android5.0 应用闪退,【Android】MultiDex;NoClassDefFoundError;5.0以下系统应用闪退
- linux java -cp lt; .txt_补交 20155202 蓝墨云班课 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能...
- 记一次突如其来的小米前端面试
- 医疗大数据平台的主流解决方案
热门文章
- php做一个文章页面,thinkphp教程-文章内容页上一页下一页功能实现
- Win10只读文件夹怎么删除
- centos gcc卸载_CentOS gcc多版本的卸载与修复
- C++查詢wry.dat中的IP地址信息
- 修改PPT导出图片DPI值
- Stream Collectors - filtering
- OPENWRT-LUCI开发总结-LUCI启动流程介绍
- python爬虫代码大作业_爬虫大作业
- win7 注册表禁 com服务器,win7系统注册表清理后导致不能上网如何解决
- 经过卖房创业与“云吞面”群聊,老季带着优刻得迎来了“开市大吉”……