#快应用代码征集令#华为IDE教程，信息流瀑布页面所有功能...

935485428

1.首先安装一个华为的IDE，下载链接 https://omp.hicloud.com/dsm/hms/cn/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool 2.安装好以后，打开，新建项目 建好以后是这样子滴，不得不说华为还是很贴心的，好多提示都是新手不容易注意到的，而且所有的命令行都不需要啦~~~例如包名不能与原生app重复 如果你的手机连接电脑，并且打开了usb调试，会自动连接手机。并且点击的话会提示安装一个引擎，叫快应用加载器，安装就行了。然后要提示一下，之前用命令行创建的项目不可以用这个调试~ 3.点击文件-> 新建页面 建好以后，会自动添加manifest.json 配置好，很舒服，好贴心啊~~~么么哒~再也不用打该死的命令行了~~~ 4. 安装less依赖 这个是需要打命令行的 首先，ctrl + ~ 打开终端 命令行：npm install less --save-dev npm install less-loader --save-dev （上面是两条命令，能明白吧！） 5.翠花，上代码！！！！！！（哈哈）

1. <template>
2. <div class="tutorial-page">
3. <tabs onchange="onChangeTabIndex">
4. <tab-bar class="tab-bar" mode="scrollable">
5. <text for="{{tabHeadList}}" class="{{currentIndex === $idx ? 'active' : ''}}">{{$item.title}}</text>
6. </tab-bar>
7. <tab-content class="tab-content">
8. <div class="tab-content-section" for="{{tabHeadList}}">
9. <refresh class="demo-page" refreshing="{{isrefresh}}" @refresh="pageRefresh">
10. <list style="flex-direction:column;columns: 1" @scrollbottom="listScrollBottom">
11. <block for="(index,item) in list">
12. <list-item class="content-item" type="productArt">
13. <div style="width:100%;height:100px;">
14. <text>
15. {{item.content}}:{{index}}
16. </text>
17. </div>
18. </list-item>
19. <list-item type="loadMore" style="justify-content: center;margin-bottom: 20px" if="{{index == (list.length-1)}}">
20. <progress type="circular"></progress>
21. <text style="margin-left: 20px">加载更多</text>
22. </list-item>
23. </block>
24. </list>
25. </refresh>
26. </div>
27. </tab-content>
28. </tabs>
29. </div>
30. </template>
32. <style lang="less">
33. .tutorial-page {
34. flex-direction: column;
35. justify-content: center;
36. align-items: center;
37. .tab-bar text {
38. padding: 0 25px;
39. text-align: center;
40. font-size: 34px;
41. }
42. .tab-bar .active {
43. color: #FF0000;
44. }
45. .tab-content {
46. flex: 1;
47. background-color: #eeeeee;
48. .tab-content-section {
49. flex: 1;
50. margin: 10px;
51. background-color: #ffffff;
52. justify-content: center;
53. text {
54. text-align: center;
55. color: #FF0000;
56. }
57. }
58. }
59. }
61. .content-item {
62. align-items: center;
63. justify-content: space-between;
64. border-bottom-color: #eeeeee;
65. border-bottom-width: 1px;
66. background-color: #ffffff;
68. }
69. </style>
71. <script>
72. import prompt from '@system.prompt'
73. export default {
74. private: {
75. tabHeadList: [
76. { title: '推荐' },
77. { title: '热门' },
78. { title: '视频' },
79. { title: '段子' },
80. { title: '汽车' },
81. { title: '社会' },
82. { title: '娱乐' },
83. { title: '军事' },
84. { title: '体育' },
85. { title: 'ＮＢＡ' },
86. { title: '财经' }
87. ],
88. list: [
89. { content: "推荐推荐推荐推荐" },
90. { content: "推荐推荐推荐推荐" },
91. { content: "推荐推荐推荐推荐" },
92. { content: "推荐推荐推荐推荐" },
93. { content: "推荐推荐推荐推荐" },
94. { content: "推荐推荐推荐推荐" },
95. { content: "推荐推荐推荐推荐" },
96. { content: "推荐推荐推荐推荐" },
97. { content: "推荐推荐推荐推荐" },
98. { content: "推荐推荐推荐推荐" },
99. { content: "推荐推荐推荐推荐" },
100. { content: "推荐推荐推荐推荐" },
101. { content: "推荐推荐推荐推荐" },
102. { content: "推荐推荐推荐推荐" },
103. { content: "推荐推荐推荐推荐" },
104. { content: "推荐推荐推荐推荐" },
106. ],
107. jzlist: [
108. { content: "系内容系内容系内容" },
109. { content: "系内容系内容系内容" },
110. { content: "系内容系内容系内容" },
111. { content: "系内容系内容系内容" },
112. { content: "系内容系内容系内容" },
113. { content: "系内容系内容系内容" },
114. { content: "系内容系内容系内容" },
115. { content: "系内容系内容系内容" },
116. { content: "系内容系内容系内容" },
117. { content: "系内容系内容系内容" },
118. { content: "系内容系内容系内容" },
119. { content: "系内容系内容系内容" },
120. { content: "系内容系内容系内容" },
121. { content: "系内容系内容系内容" },
122. { content: "系内容系内容系内容" },
123. { content: "系内容系内容系内容" },
124. { content: "系内容系内容系内容" },
125. { content: "系内容系内容系内容" },
126. ],
127. isrefresh: false,
128. currentIndex: 0
129. },
130. onInit() {
131. // 加载第一个页签内容
132. this.changeTabIndex(0)
133. },
134. changeTabIndex(index) {
135. const item = Object.assign({}, this.tabHeadList[index])
136. this.tabHeadList.splice(index, 1, item)
137. },
138. onChangeTabIndex(evt) { //切换页面重新加载数据
139. this.currentIndex = evt.index
140. this.changeTabIndex(evt.index)
141. prompt.showToast({
142. message: '加载完成'
143. })
144. },
145. listScrollBottom() { //下拉刷新 继续加载 分页内容
146. var _this = this
147. var list = this.jzlist;
148. list.forEach((item, index) => {
149. _this.list.push(item);
150. })
151. prompt.showToast({
152. message: '加载完成'
153. })
154. },
155. pageRefresh: function (e) { //上拉加载 刷新重新获取
156. this.isrefresh = e.refreshing;
157. setTimeout(() => {
158. this.isrefresh = false;
159. console.log(this.isrefresh)
160. this.list = [];
161. var list = this.jzlist;
162. var _this = this
163. list.forEach((item, index) => {
164. _this.list.push(item);
165. })
166. prompt.showToast({
167. message: '刷新完成'
168. })
169. }, 1000);
170. },
171. }
172. </script>

复制代码

6.上面这段是可以滑动刷新的效果，样子不是特别好看，临时搞得，是我们开发页面很常用的，上拉刷新，下拉加载，左右滑动替换列表~ 可以复制直接用哦~ com.index.wzs.quickapp.zip (68.51 KB, 下载次数: 0)

2018-7-27 16:59 上传

点击文件名下载附件
rpk包 附件：rpk包 7.下面就要讲讲上线的东西啦~ 第一步 第二步 这样的话就可以在dist文件夹里面找到打包好的rpk文件了~然后在快应用后台提交审核，就完成了一整套的开发了~ 使用心得： 华为IDE可以说不用任何的命令行就可以完成项目操作了~大大节省了我们的开发难度~ 谁开发之前先学习一大堆的命令行啊，再说了我们只是前端小开发仔啊！！！！何必要这么为难我们！！！呜呜呜呜！！！ 另外要吐槽的是，在华为IDE没出来之前，我们调试输出信息要使用Google浏览器，来打印，那么用过的小伙伴肯定踩过这里的坑，老闪屏，老断开连接等问题，现在，我们只需要点击一个按钮，就可以打开华为IDE的debug工具，太方便了！！！！！！！！良心啊！！点赞啊！！！ 还有，就是创建新的文件夹，之前都是复制一个文件夹，粘贴，然后自己在manifest.json 文件里面去自己写配置，好麻烦，现在用IDE直接创建出来还能选择你想在页面里面引入的模块，也不用担心配置文件写错了。 IDE支持less，不会报错，之前用别的开发工具，用less 那报错真的是难受死了。强迫症，你懂得~！ 随时调试，是真滴方便，右边就是页面效果，再也不用低头看手机了，治好了我多年的颈椎病！（&*……@#（）*&￥！！！） 基本上，我之前记住的所有命令行，都可以在工具里面找到，而且是中文的哦，（虽然我是英文大拿！！哈哈哈） 先分享这么多，如果有问题，评论留言，我会倾囊相授~

935485428

#快应用代码征集令#华为IDE教程，信息流瀑布页面所有功能... https://bbs.quickapp.cn/forum.ph ... id=851&fromuid=6814