标签:timeout 开源 page 开发工具 received stc 小程序 pes one
`Okam` 一个面向小程序开发的开发框架,开发体验类 `Vue`。详情
1 /** 2 * @file 小程序入口 3 * @author <author> 4 */ 5 6 ‘use strict‘; 7 8 export default { 9 config: { 10 pages: [ 11 ‘pages/home/index‘ 12 ], 13 14 window: { 15 navigationBarBackgroundColor: ‘#211E2E‘, 16 navigationBarTextStyle: ‘white‘, 17 backgroundTextStyle: ‘light‘, 18 enablePullDownRefresh: true, 19 backgroundColor: ‘#ccc‘ 20 }, 21 22 networkTimeout: { 23 request: 30000 24 } 25 }, 26 27 $promisifyApis: [] 28 };
1 /** 2 * @file The app entry style 3 * @author <author> 4 */ 5 6 @require ‘./common/css/mixin.styl‘ 7 @require ‘./common/css/variable.styl‘ 8 @require ‘./common/css/common.styl‘
1 <template> 2 <view class="home-wrap"> 3 <hello :from="from" @hello="handleHello"></hello> 4 <view class="click-tip" if="clicked">You click me~</view> 5 </view> 6 </template> 7 <script> 8 import Hello from ‘../../components/Hello‘; 9 10 export default { 11 config: { 12 title: ‘Page Title‘ 13 }, 14 15 components: { 16 Hello 17 }, 18 19 data: { 20 btnText: ‘Hello‘, 21 clicked: false, 22 from: ‘HomePage‘ 23 }, 24 25 methods: { 26 27 handleHello(e) { 28 this.clicked = true; 29 this.btnText = ‘You clicked‘; 30 31 this.$api.showToast({ 32 title: ‘Received Hello‘, 33 duration: 3000 34 }); 35 } 36 } 37 }; 38 </script> 39 <style lang="stylus"> 40 @require ‘../../common/css/variable.styl‘ 41 @require ‘../../common/css/mixin.styl‘ 42 43 .home-wrap 44 padding: 100px 45 height: 100vh 46 box-sizing: border-box 47 background: #ddd 48 49 .click-tip 50 margin-top: 100px 51 padding: 20px 52 text-align: center 53 color: red 54 55 </style>
1 <template> 2 <view class="hello-wrap"> 3 <button plain class="hello-btn" @click="handleClick">Hello in {{from}}</button> 4 </view> 5 </template> 6 <script> 7 export default { 8 config: { 9 }, 10 11 props: { 12 from: String 13 }, 14 15 components: { 16 }, 17 18 data: { 19 }, 20 21 methods: { 22 handleClick() { 23 this.$emit(‘hello‘, {from: this.from}); 24 } 25 } 26 }; 27 </script> 28 <style lang="stylus"> 29 .hello-wrap 30 padding: 20px 31 margin: 20px 0 32 33 .hello-btn 34 width: 846px 35 height: 148px 36 margin: 0 auto 37 line-height: @height 38 background: #fff 39 text-align: center 40 border-radius: 120px 41 border: none 42 </style>
完整示例详见: https://github.com/ecomfe/okam-template
操作步骤:
git clone https://github.com/ecomfe/okam-template.git cd okam-template npm i npm run dev // 百度小程序开发模式 npm run dev:wx // 微信小程序开发模式 开发工具 打开 构建产物目录 `dist、wx_dist`
技术交流:QQ 群:`728460911`,入群备注:okam
技术学习:项目代码开源在 Github 上,有问题或者建议,欢迎提 issue, 发 pr。
Okam(奥卡姆):小程序开发框架,支持百度小程序、微信小程序、支付宝小程序
标签:timeout 开源 page 开发工具 received stc 小程序 pes one
原文地址:https://www.cnblogs.com/xiao-hong/p/9937780.html