灏忕▼搴忔鏋禬ePY 浠庡叆闂ㄥ埌鏀惧純韪╁潙鍚堥泦

Posted 2021-09-04 闃垮叺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了灏忕▼搴忔鏋禬ePY 浠庡叆闂ㄥ埌鏀惧純韪╁潙鍚堥泦相关的知识，希望对你有一定的参考价值。

灏忕▼搴忔鏋禬ePY 浠庡叆闂ㄥ埌鏀惧純韪╁潙鍚堥泦

涓€鐐圭偣浠嬬粛WePY

鍥犱负灏忕▼搴忕殑璇硶璁捐鐣ヨ糠锛?br>鎵€浠?sup>x1 妯″潡鍖栬捣鏉ュ苟涓嶆柟渚匡紝
鎵€浠?sup>x2 鍚勫巶灏卞嚭浜嗕笉灏戠殑妗嗘灦鐢ㄤ互鏂逛究灏忕▼搴忕殑寮€鍙戯紝
鑵捐鐪嬪埌鍒汉瀹堕兘鍑轰簡妗嗘灦浜嗛偅鐪嬫潵鎴戠殑灏忕▼搴忓彲鑳界湡鐨勪笉澶柟渚垮紑鍙戝挴锛岄偅鎴戜篃鍑轰竴涓惂馃
鎵€浠?sup>x3 WePY 灏辫繖涔堟í绌哄嚭涓栦簡銆?/p>

閭ｅ皬楣呴箙馃惂浣犳棭骞插槢鍘讳簡鍟婏紝涓轰粈涔堜笉鎶婂皬绋嬪簭璁捐鐨勫ソ鐢ㄤ竴鐐圭偣锛佺▼搴忓憳濂藉ソ鐜╂槸鍚э紒

鍚屾牱鏄豢鍘熺敓搴旂敤浣犲氨涓嶈兘瀛﹀浜哄Electron 鎶婄晫闈氦缁欑綉椤靛師鐢烪TML 鍘诲鐞嗕箞锛屾悶涓€鍫嗚醇娌＄敤缁勪欢鍚勭濂囧鎬€殑闂銆傘€?/p>

绋嬪簭鍛樹綍鑻︿负闅剧▼搴忕尶鍟婐煒?/p>

涓嶅ソ鎰忔€濇縺鍔ㄤ簡馃檮

涓婇潰馃憜閮芥槸鎴戝惞鐨勫叾瀹濿ePY 鏄渶鏃╃殑灏忕▼搴忔鏋朵箣涓€馃槀

WePY 鏄竴涓紑鍙戦鏍肩被浼糣ue.js, 鏀寔绫讳技Props, Mixin, Computed, Slot 绛夌壒鎬х殑椋庢牸寮€鍙戯紝
鏀寔缁勪欢鍖?妯″潡鍖栵紝NPM 渚濊禆锛孭romise/Async, ESnext, Less/Sass/Styus, Babel/Typescript 鐨勪竴涓皬绋嬪簭寮€鍙戞鏋躲€?/p>

璇硶涓婄被浼糣ue.js 澶氫竴鐐癸紝浣滀负涓€涓猂eact 鍏氭垜骞舵病鏈夊緢鍠滄锛屼絾鍙兘Vue 鍏氫篃涓嶄竴瀹氬氨鍠滄銆?br>姣曠珶瀹冨彧鏄儚锛屽苟娌℃湁寰堜竴鏍凤紝寮€鍙戣捣鏉ヨ窡鍋氳繛杩炵湅浼肩殑璺烿ue.js 鍚勭琛屼负涓嶄竴鑷淬€傘€?/p>

闂茶瘽灏辫鍒拌繖浜嗭紝寮€濮嬭姝ｄ簨銆?/p>

閭ｄ簺瑕佹敞鎰忕殑鐐?/h2>
姝よ妭鍐呭鍙傝€?<u>灏忚壊灏忛瓟</u> 浜?<u>2018-03-20</u> 鍙戝竷鍦?Segmentfault 鐨勬枃绔?Wepy-灏忕▼搴忚俯鍧戣
ALL CREDIT GOES TO HIM THANKS ALOT
棣栧厛鏄枃妗ｇ被锛?/p>
WePY棣栭〉
WePY瀹樻柟鏂囨。
灏忕▼搴忓畼鏂规枃妗?/a>
WePY Github Issues
鐒跺悗鏄竴浜涜鐐癸細

1. Data 鍙婃暟鎹粦瀹?/h3>

1.1 瀵逛簬鍙兘鐢ㄥ埌鐨勬墍鏈夋暟鎹棰勫厛缁欏€硷紝鍗宠鍏堝湪data 涓垵濮嬪寲锛涘惁鍒欎箣鍚庢洿鏂版暟鎹椂灏嗕笉浼氳Е鍙戣剰鏁版嵁妫€鏌ユ祦绋嬶紝涔熷氨涓嶄細瑙﹀彂椤甸潰閲嶆覆鏌撱€?/p>

1.2 鏇存柊鏁版嵁鏃跺彲浠ョ洿鎺ョ敤 this.foo = bar, 涓嶇敤寰俊鍘熺敓鐨?this.setData 鏂规硶銆?/p>

class Fn extends wepy.page {
  data = {
    foo: 1,
    // bar: 2, 姝ゅ涓嶅０鏄?bar
  }

  someFunction() {
    // 椤甸潰鏇存柊
    this.foo = 10;
    // 杩欎笉鐢熸晥
    this.bar = 20;
  }
}

1.3 鏁版嵁鍦ㄦā鏉夸腑杩涜缁戝畾鏃跺彲浠ョ敤 :foo=bar 鐨勫舰寮忚繘琛岀粦瀹氥€傛敞鎰忛潪瀛楃绫诲瀷鐨勶紙姣斿璇村竷灏斿€硷級鍙婂彉閲忚鍔犲弻澶ф嫭鍙凤紝鍚﹀垯褰撴垚瀛楃涓插鐞嗐€傚叾浠栫殑闈炵粦瀹氱殑锛岃鐩存帴鏄剧ず鐨勫唴瀹瑰彲鐩存帴鐢ㄥ弻澶ф嫭鍙峰寘浣忓嵆鍙€傚弻澶ф嫭鍙峰唴鍙繘琛岀畝鍗曠殑杩愮畻锛屼絾涓嶆敮鎸丣S 妯℃澘瀛楃涓叉垨鍏朵粬鏂规硶杩愮畻銆?/p>

// Template
<component :name="{{myName}}">  // 缁戝畾鏁版嵁
  // 姝ｅ父锛氭覆鏌撳唴瀹?  {{Greeting}}

  // 姝ｅ父锛氭覆鏌撳唴瀹?  {{Greeting + \'World!\'}}

  // 鎶ラ敊锛氫笉鏀寔 JS妯℃澘瀛楃涓?  {{`${Greeting} World!`}}

  // 鎶ラ敊锛氫笉鏀寔 JS 鏂规硶璋冪敤
  {{String(Greeting).trim()}}
</component>

// Script
class Foo extends wepy.page {
  data = {
    myName: \'WePY\',
    greetings: \'Hello\',
  }
}

1.4 鎿嶄綔鏂规硶鐢?@tap=function 鐨勫舰寮忚繘琛岀粦瀹氥€傚熀鏈笂鎵€鏈夊井淇″師鐢熺殑鏂规硶 bindFn=fn 閮藉彲浠ョ洿鎺ュ啓鎴?@Fn=fn.

// Template
// 鍘熺敓鐨?bindtap=fn
<view @tap="fn"></view>

// Script
class Foo extends wepy.page {
  methods = {
    fn: () => {},
  }
}

2. Methods & Computed

2.1 class 涓殑methods 涓彧鍖呭惈妯℃澘鐢ㄧ殑浜嬩欢鏂规硶锛屽叾浠栫殑鑷畾涔夋柟娉曞簲璇ヤ笌methods 鏈韩骞崇骇锛屽浜庨《灞傘€?/p>

// Template
<view @tap="fn"></view>

// Script
class Foo extends wepy.page {
  methods = {
    fn: () => {
      this.doSomeThing();
    },
  }

  doSomeThing: () => {}
}

2.2 妯℃澘浜嬩欢鎻愪緵浜嗏€滄柟娉曞悗缂€鈥濅綔涓鸿娉曠硸浠ヤ唬鏇垮師鐢熷啓娉曪紝鏈?code>.default, .stop 鍜?.user 鍚庣紑锛屾瘮杈冨父鐢ㄧ殑鏄?.stop锛岀浉褰撲簬鍘熺敓鐨?catch.

// Template
// .default 鍙笉鍐?<view @tap="fn"></view>
// .stop 鐩稿綋浜?catch, 鐐瑰嚮浜嬩欢鍒版缁撴潫锛屼笉浼氬悜涓婂眰缁勪欢鍐掓场
<view @tap.stop="fn"></view>

2.3 姝ゅ杩樻彁渚涗簡computed 鍙妛atcher 鍩烘湰涓嶸ue.js 绫讳技锛屽氨涓嶄粙缁嶄簡~

3. Mixin & Components

3.1 Mixin 鏈夊悗绔紪绋嬬殑灏忎紮浼村簲璇ヤ細姣旇緝鐔熸倝涓€鐐癸紝鍙互灏嗛€氱敤鏂规硶鎻愪緵缁欎笉鍚屽湴鏂逛娇鐢ㄣ€傚湪杩欓噷瀹冭兘鐩存帴璇诲彇鍏辨湁鐨勬暟鎹紙姣斿璇翠粠Redux 閲岃鍙栫殑鍐呭绛夛級浣嗕娇鐢ㄦ椂瑕佹敞鎰忓綋Mixin 涓敤鍒颁簡鏉ヨ嚜Redux 涓殑鏁版嵁鏃讹紝鏁版嵁鏈韩鐨刢onnect 瑕佸湪鍏跺叿浣撳紩鐢ㄥ埌鐨勯〉闈㈤噷闈㈠畾涔夛紝璨屼技Mixin 鏈韩骞朵笉鑳藉皢Redux 涓殑鏁版嵁connect 杩涙潵銆?/p>

3.2 Mixin 涓殑methods 涓笉鑳界洿鎺ヤ娇鐢?this.foo = bar 鍘昏缃〉闈腑鐨勫€硷紝鍥犱负涓婁笅鏂囦笉涓€鑷翠簡涓嶄細鐢熸晥銆?/p>

3.3 Mixin 涓殑鎵ц椤哄簭涓嶸ue.js 涓殑鐩稿弽銆俈ue.js 涓槸鍏堟墽琛孧ixin 涓殑鍑芥暟锛?鍐嶆墽琛岀粍浠舵湰韬殑鍑芥暟銆傝繖閲屾墽琛岄『搴忕浉鍙嶃€?/p>

琛ュ厖锛歏ue.js 涓浜庨挬瀛愬嚱鏁帮紝浼氬厛鎵цMixin 涓殑锛屽啀鎵ц缁勪欢鑷韩鐨勶紱
Vue.js 涓璵ethods 濡傛灉鍜孧ixin 鍚屽悕锛岄偅涔堝彧浼氭墽琛岃嚜韬殑鏂规硶銆?/em>

3.4 缁勪欢鍦?import 鏃朵笉瑕佸甫鍚庣紑鍚嶏細

// Good ;-)
import Xxx from \'../xx\';

// Damned :-(
import Xxx from \'../xx.wpy\';

3.5 鏈€璁╀汉鎳婃伡鐨勪笢瑗挎潵浜嗏€斺€?WePY 涓殑缁勪欢銆傚畠鏄粍浠跺叏鏄€滃崟渚嬧€濈殑锛岃繖鎰忓懗鐫€褰撲綘鍦ㄥ悓涓€涓〉闈腑鍘讳娇鍚屼竴涓粍浠跺娆℃椂锛屾樉绀哄嚭鏉ョ殑閭ｂ€滃鈥濅釜缁勪欢瀹冪粦瀹氱殑鍐呭閮戒細琚洿鏂版垚鏈€鍚庝竴涓紝浣犱笉鑳界粰浠栦滑缁戝畾鍒颁笉鍚岀殑鍐呭涓婏紝浣犵敤缁勪欢鏃跺彧鑳戒韩鍙楀埌鏍峰紡涓婄殑浼樺娍锛屽畬鍏ㄤ笉鐭ユ墍鎯充綍鐗煠封€嶁檪锔?/p>

// Template
<view wx:for="{{list}}">
  <comp :number.sync="{{item}}"></comp>  // 浣犱篃涓嶈兘杩欐牱鍋氾紝鍥犱负瀹冧笉鎺ュ彈鍙橀噺
</view>

// Script
import Comp from \'../Comp\';

class Foo extends wepy.page {
  data = {
    list: [1, 2, 3, 4],
  }

  components = {
    comp: Comp,
  }
}

闅惧彈 = =||

3.6 瀵逛簬鍘熺敓鍙婇潪鍘熺敓缁勪欢锛屽畠鐨勬ā鏉块€昏緫涔熸€绘槸鈥滅湅涓婂幓涓嶉偅涔堝浐瀹氣€濈殑锛屾瘮濡傝锛?/p>

// 姝ｇ‘ - 鐪佺暐涓?true
<scroll-view scroll-y></scroll-view>

// 閿欒 - 甯冨皵鍊间笉鑳藉甫鎷彿
<scroll-view scroll-y="{{true}}"></scroll-view>

// 姝ｇ‘ - 浼拌杩欓噷瀹為檯涓婂彲鑳?"true" 鏄蹇界暐浜嗙殑
<scroll-view scroll-y="true"></scroll-view>

// 姝ｇ‘ - 浣嗘鏃惰繖涓柟娉曟帴鍙楀埌鐨勭涓€涓弬鏁颁负褰撳墠Class鐨勫疄渚嬶紝鍧戠埞鍟?<view @tap="toggleSomeThing"></view>

// 閿欒 - 甯冨皵鍊艰甯︽嫭鍙?<view @tap="toggleSomeThing(true)"></view>

// 姝ｇ‘
<view @tap="toggleSomeThing({{true}})"></view>

3.7 杩樻湁涓€涓伓鍙戠殑鎯呭喌鏄?wx:if 鏃讹紝class 绛夊叾浠栧睘鎬у伓鍙戜細琚€滃拷鐣ユ帀鈥濄€?/p>

// 姝ｅ父
<view wx:if="{{something === \'foo\'}}" class="foo">

// 鍋跺皵浼氫笉姝ｅ父锛宑lass 琚拷鐣ユ帀浜?<view class="bar" wx:if="{{something === \'bar\'}}">

鎵€浠ユ€讳綋涓婃瘮杈冨缓璁皢鏉′欢鍏堝啓鍑烘潵锛屽悗闈㈠啀鍔犲叾浠栧睘鎬э紝鎴栬€呯洿鎺ョ敤 block 鏍囩鍘讳綔涓烘潯浠跺垽鏂€?/p>

3.8 Page 缁ф壙鑷狢omponent, 浣哖age 鎵╁睍浜嗛〉闈㈡墍鐗规湁鐨?config 閰嶇疆浠ュ強鐗规湁鐨勯〉闈㈢敓鍛藉懆鏈熷嚱鏁扮瓑锛涙墍浠omponent 鍜孭age 涔嬮棿鍩烘湰涓€鏍凤紝浣咰omponent 娌℃湁 onLoad 绛夌敓鍛藉懆鏈熴€?/p>

4. This 鍙婂唴瀹氭柟娉?/h3>
4.1 鏇存柊鏁版嵁鏃跺彲浠ョ洿鎺ョ敤 this.foo = bar, 涓嶇敤寰俊鍘熺敓鐨?this.setData 鏂规硶銆?/p>
4.2 鎵€鏈夊彲鑳藉彂鐢熷紓姝ョ殑鍦版柟淇敼鏁版嵁鍚庤鎵嬪姩淇冨彂鑴忔暟鎹鏌ユ祦绋嬶紝鍚﹀垯涓嶄細淇冨彂椤甸潰閲嶆覆鏌撱€?br>甯歌鐨勫湴鏂规湁璇锋眰鍚庢洿鏂帮紝setTimeOut, getStorageSync 绛夌瓑~
5. canvas & base64
Canvas 鐨勭浉鍏虫搷浣滃拰寰俊鍘熺敓涓€鏍凤紝鍙傜収杩欓噷鍗冲彲锛?/p>
ArrayBuffer 鍜?Base64 浜掕浆锛?/p>
浠?v1.1.0 (2017.03.31) 鐗堟湰灏辨湁杩欎袱涓?API 浜嗭紝鍙互鐩存帴鐢細
wx.arrayBufferToBase64 wx.base64ToArrayBuffer
6. 鍏朵粬锛屼竴鐐瑰紑鍙戝缓璁?/h3>
6.1 灏忕▼搴忓唴閮ㄥ畾涔夌殑瀹炰緥API 閮戒互 $ 寮€澶达紝鎵€浠ユ垜浠懡鍚嶆椂涔熶笉搴旇浠?$ 寮€澶达紝浠ヤ究鍖哄垎銆?/p>
6.2 鍚屾牱鐨勶紝濡傛灉鐢ㄤ簡Redux, 閭ｄ箞connect 杩涙潵鐨勬柟娉曚篃浼氭槸閫氳繃 this.methods.fn() 鐨勫舰寮忚闂紝寤鸿涔熷緱鍖哄垎寮€姣旇緝濂斤紝姣斿璇撮〉闈㈠強缁勪欢涓殑鏂规硶鍔燽ind 鍓嶇紑銆傚儚杩欐牱锛?/p>
// Redux Action this.methods.function(); // Page Methods this.methods.bindFunction();
寮€鍙戜腑鍐欑殑涓€浜涙湁鐢ㄧ殑 Snippets
璺ㄩ〉闈㈤€氳
杩欐槸灏忕▼搴忓師鐢熺殑浠ｇ爜锛岀敤浜庢洿鏂板墠涓€涓〉闈腑鐨凞ata 鍊?/p>
搴旂敤鍦烘櫙姣斿璇存湁涓€涓〃鍗曠被鐨勯〉闈紝鍏朵腑鐨勬煇涓瓧娈靛彲浠ョ偣鍒板彟澶栦竴涓叏灞忕殑鐣岄潰鍘荤紪杈?/p>
鏀瑰畬浜嗕繚瀛樺悗浼氬洖鍒板綋鍓嶇殑椤甸潰涓户缁紪杈戝叾浠栫殑瀛楁
// 鑾峰彇褰撳墠椤甸潰鏍堢殑瀹炰緥 <Array> let crtPage = getCurrentPages(); // 寰楀埌涓婁竴涓〉闈㈠疄渚?<Object> let prevPage = crtPage[crtPage.length - 2]; // 璁剧疆鍓嶄竴涓〉闈腑鐨勬暟鎹?prevPage.setData({note: this.value}); /* * 杩欎釜鍋氭硶鍙互姝ｅ父璁剧疆鍓嶄竴涓〉闈腑鐨凞ata 鐨勫€硷紝 * 浣嗗鏋滈偅涓〉闈腑鐨勯偅涓狣ata 鏄敤浣淧rops 浼犵粰缁勪欢鐨勮瘽 * 缁勪欢涓殑鍊煎苟涓嶄細璺熺潃鏇存柊鎴愭柊鐨勫€? */
姝ｅ垯瑙ｆ瀽鍩庡競瀛楃涓诧紝鐢ㄤ簬寰俊鍘熺敓鐪佸競閫夋嫨缁勪欢
鍥犱负鏈変釜椤圭洰鐨勫悗绔槸淇濆瓨鐨勭被浼?"涓婃捣甯備笂娴峰競寰愭眹鍖? 鐨勫€?/p>
浣嗗井淇＄殑缁勪欢浣跨敤鐨剉alue 鍗存槸绫讳技 [\'涓婃捣甯?, \'涓婃捣甯?, \'寰愭眹鍖?] 杩欐牱鐨勬暟缁?/p>
涓轰簡淇濊瘉淇敼鏃惰兘姝ｇ‘鏄剧ず涓婃璁剧疆鐨勫唴瀹规墍浠ュ氨鏈変簡杩欎箞涓€涓笢瑗?/p>
/* * Parse String to Wechat City Array * * @param: * city <String>: \'涓婃捣甯備笂娴峰競寰愭眹鍖? * * @return: * <Array> [\'涓婃捣甯?, \'涓婃捣甯?, \'寰愭眹鍖?] */ const parseRegion = (city) => { let str = city; let region = []; let reg = [ /\\S[^鐪亅甯倈鍖篯+[鐪亅甯倈鍖篯/, /\\S[^甯倈鍖篯+[甯倈鍖篯/, /\\S[^甯倈鍖簗鍘縘+[甯倈鍖簗鍘縘/, ]; for (let r of reg) { const rs = r.exec(str); if (rs !== null) { region.push(rs[0]); str = str.replace(rs[0], \'\'); } } return region; };
URL 鍙傛暟搴忓垪鍖?/h3>
鐢ㄩ€旓細褰撳皬绋嬪簭闇€瑕佹爮鎴搷浣滄椂锛屼复鏃朵繚瀛樹紶鍏ョ殑鍙傛暟
// onLoad(op) { this.op = op; } // reLaunch 鏃?url = some-url + \'?\' + this.serializer(this.op) serializer = (data = {}) => ( Object.entries(data).map( ([key, value]) => ( value !== undefined ? `${key}=${encodeURIComponent(value)}` : \'\' ) ) .filter((item) => (item)) .join(\'&\') );
以上是关于灏忕▼搴忔鏋禬ePY 浠庡叆闂ㄥ埌鏀惧純韪╁潙鍚堥泦的主要内容，如果未能解决你的问题，请参考以下文章

Java浠庡叆闂ㄥ埌瀹炴垬涔嬶紙20锛夊瓧绗︿覆涔?鏌ユ壘瀛楃涓叉渶鍚庝竴娆″嚭鐜扮殑浣嶇疆

Git 宸ヤ綔娴佺▼锛汫raphQL 浠庡叆闂ㄥ埌瀹炶返锛汚ngular 9.0 鍙戝竷锛両vy 姝ｅ紡鎶佃揪

13涓猅ensorflow瀹炶返妗堜緥锛屾暀浣犲叆闂ㄥ埌杩涢樁

Perl 鏈€浣冲疄璺?鑺傞€? --- 17

姣旂壒甯佺嫍鐙楀竵澶у彉鑴革紝鐏扮妧鐗涙鏉ヤ复