江苏快三:微信小程序框架解析

江苏快三 www.amavm.com 2020-04-25 06:29



本文作者:糖小工 ,來自原文What 基于微信 類web 原生閉會 解決計劃 How? 交互原理 邏輯層(App Service) 邏輯層由JavaScript編寫 邏輯層將數據進行處理后發送給視圖層,同時接收視圖層的事件反饋 所 ..
本文作者:糖小工 ,來自原文What?基于微信 類web 原生閉會解決計劃How?

交互原理邏輯層(App Service)邏輯層由JavaScript編寫邏輯層將數據進行處理后發送給視圖層,同時接收視圖層的事件反饋所有代碼將會打包成一份JavaScript,啟動時運行,直到小程序燒毀視圖層(View)由WXML與WXSS編寫,由組件進行展示將邏輯層的數據反應成視圖,同時將視圖層的事件發送給邏輯層。阜陽微信小程序它可以在微信內被便捷地獲取和傳播,用戶隨時可用,用完即走,實現了應用“觸手可及”的夢想。阜陽小程序制作專注于面向微信小程序、百度小程序(智能小程序)、支付寶小程序、今日頭條小程序、QQ輕應用(即QQ小程序)、抖音小程序、快應用(手機廠商基于硬件平臺共同推出的新型應用)等小程序開發者與用戶提供小程序相關開發技術、制作案例、渠道分發、流量變現、行業資訊等信息的發布與傳播服務。阜陽小程序開發集小程序開發、制作、分發、推廣、交易、行業資訊等服務于一體的綜合門戶網站。App Service -ManagerApp() -小程序進口Page() -頁面進口數據綁定、事件散發、生命周期、路由治理

wxml

js生命周期

Paste_Image.pngView - WXMLweixin markup Language支撐邏輯、算數盤算支撐模板、引用
WXML ---compiler--->JS:generateFunc ---Data--->VirtualTree ----Virtual DOM--->Dom Tree
WXML 存在什么才干?數據綁定
<!-- wxml --><view> {{ message }}</view>列表渲染
<!--wxml--><view wx:for="{{array}}"> {{item}} </view>
前提渲染
<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view><view wx:elif="{{view == 'APP'}}"> APP </view><view wx:else="{{view == 'MINA'}}"> MINA </view>
模板
<!--wxml--><template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view></template><template is="staffName" data="{{..staffA}}"></template><template is="staffName" data="{{..staffB}}"></template><template is="staffName" data="{{..staffC}}"></template>事件
<view bindtap="add"> {{count}} </view>
page.js
Page({data: {message: 'Hello MINA!',array: [1, 2, 3, 4, 5],view: 'MINA',staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}count: 1},add: function(e) {this.setData({ count: this.data.count + 1 })}})View - WXSSWXSS -weixin style sheet自適應單位 RPX-Responsive Pixel無級聯-避免被組件內結構破壞
WXSS -------compiler-----> JS -----width,DPR------> CSS
View -Render數據(Modal)與視圖(View)完全分別邏輯層運行在獨破環境中,無奈直接操作DOM利用WXML模板語言減少維護本錢單項數據綁定重渲染利用Virtual-DOM減少開銷

與Natice通信圖示


江苏快三
電話
江苏快三
聯系
{ganrao}