小程式開發 wepy框架類vue的開發方式

阿新 • • 發佈：2019-01-29

import wepy from 'wepy' import List from '../components/list' import Panel from '../components/panel' import Counter from '../components/counter' import Group from '../components/group' import Toast from 'wepy-com-toast' import testMixin from '../mixins/test' // 引入 QCloud 小程式增強 SDK import qcloud from '../assets/qcloud-weapp-client-sdk/index'

export default class Index extends wepy.page { config = { navigationBarTitleText: 'test' } components = { panel: Panel, counter1: Counter, counter2: Counter, list: List, group: Group, toast: Toast } mixins = [testMixin] data = { datas: '', mynum: 20, userInfo: { nickName: '載入中...'

}, normalTitle: '原始標題', setTimeoutTitle: '標題三秒後會被修改', count: 0, netrst: '', groupList: [ { id: 1, name: '點選改變', list: [ { childid: '1.1', childname: '子項，點我改變' }, { childid: '1.2', childname: '子項，點我改變'

}, { childid: '1.3', childname: '子項，點我改變' } ] }, { id: 2, name: '點選改變', list: [ { childid: '2.1', childname: '子項，點我改變' }, { childid: '2.2', childname: '子項，點我改變' }, { childid: '2.3', childname: '子項，點我改變' } ] }, { id: 3, name: '點選改變', list: [ { childid: '3.1', childname: '子項，點我改變' } ] } ] } computed = { now() { return +new Date() } } methods = { doLogin() { qcloud.setLoginUrl('https://66280981.qcloud.la/api/user/login'); qcloud.login({ success: function (userInfo) { console.log('登入成功', userInfo); }, fail: function (err) { console.log('登入失敗', err); } }); }, enevts() { qcloud.request({ url: `https://66280981.qcloud.la/api/user/info`, login: true, success: (response) => { console.log(response.data.data.userInfo) // this.me = response.data.data.userInfo; // this.connect(); } }); }, plus() { this.mynum++ }, toast() { let promise = this.$invoke('toast', 'show', { title: '自定義標題', img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png' }) promise.then((d) => { console.log('toast done') }) }, tap() { console.log('do noting from ' + this.$name) }, communicate() { console.log(this.$name + ' tap') this.$invoke('counter2', 'minus', 45, 6) this.$invoke('counter1', 'plus', 45, 6) this.$broadcast('index-broadcast', 1, 3, 4) }, request() { let self = this let i = 10 let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ=='] while (i--) { wepy.request({ url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i, success: function (d) { self.netrst += d.data + '.' self.$apply() } }) } }, counterEmit(...args) { let $event = args[args.length - 1] console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`) } } events = { 'index-emit': (...args) => { let $event = args[args.length - 1] console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`) } } onLoad() { let self = this this.$parent.getUserInfo(function (userInfo) { if (userInfo) { self.userInfo = userInfo } self.normalTitle = '標題已被修改' self.setTimeoutTitle = '標題三秒後會被修改' setTimeout(() => { self.setTimeoutTitle = '到三秒了' self.$apply() }, 3000) self.$apply() }) } }

小程式開發 wepy框架類vue的開發方式

小程式開發 wepy框架類vue的開發方式

美團開源用 Vue.js 開發小程式的前端框架 mpvue

小程式學習之路二：開發工具部分功能和專案結構介紹

小程式音視訊背後的故事 | 開發

微信小程式支付以及微信退款開發

微信小程式--使用本地伺服器進行測試開發

【微信小程式學習筆記】1：開發一個帶歷史記錄功能的四則計算器

小程式元件化框架 WePY 在效能調優上做出的探究

微信小程式和微信公眾號開發注意事項（有些是從微信開發文件中摘抄出來的）

微信小程式遊戲開發文件以及開發工具地址

微信小程式之---模版元件拖拽開發嘗試

微信小程式：支付系列專輯（開發指南+精品Demo）

如何自學PHP做一個網站 PHP可以做什麼專案？網站小程式公眾號能用PHP開發嗎？

vue和微信小程式的區別、比較 vue和微信小程式的區別、比較

微信小程式文件 --框架--windows全域性配置

FAutoTest一個 H5、小程式自動化測試框架

小程式小結之框架

（轉）VC串列埠小程式（用SerialPort類）

微信小程式用js控制類名的切換用於改變不同的樣式

微信小程式小結之框架

小程式開發 wepy框架 類vue的開發方式

相關推薦

小程式開發 wepy框架類vue的開發方式