快应用小试

三、示例代码

华为的开发工具在创建项目的时候有一个『示例项目模板,Showcase』,里面几乎包括所有的组件和API的功能示例,非常值得参考。

官方也提供了示例代码,链接

12304版本:1月4日推出

 一、开发工具

和微信、支付宝小程序很大不同的是,快应用官方的开发工具,居然是在VScode上面安装的插件,好吧,也挺好,不用新的开发环境了。但是,居然不能在开发环境中预览我写的代码,这个和微信开发环境相比,真的很不人性化,我必须要安装hap-toolkit,在Android手机安装调试器,然后通过npm run server的方式,去非常原始的方式去开发。

这么反人类的方式,我是接受不了,于是查了一下其他的快应用开发工具,代表性的就是华为快应用开发工具HbuildX 。

  • HbuildX特点是有一个小程序转快应用的功能,尝试过,出现的错误太多,复杂点的小程序效果不好,其他没什么好说的。
  • 华为的开发工具可以支持手机连接之后实时预览、Inspect和调试模式,总体来说要好用一些。

本人建议使用华为快应用开发工具,毕竟是华为推动的快应用,还是有基础的。

开发环境不校验:为了让开发环境中使用appid时,不合规则的域名也可以正常使用(比如本地或IP地址及未配置的域名)

二、开发文档

开发文档【官方】的、【华为】的、还有【w3cschool】的,w3cshool和官方基本一致,都有『搜索功能』,这个还是很实用的。

华为的文档有介绍自家开发工具的使用,而且比官方的结构要好一点。 

10:微信版本问题,伴随微信的版本更新,不同的微信版本之间可能会出现不同的未知BUG;你可以在这里查看最新微信版本:weixin.qq.com

四、开始编程

项目开发中使用快应用比较多的是webview,技术难点是要H5和快应用之间进行交互通信。

简约点来说,快应用代码分为三部分,模板、样式和脚本,这样就构成了一个『组件』。开发形式很像VUE,如下:

 1 <template>
 2   <div class="tutorial-page">
 3     <!-- 方式1:默认$item代表数组中的元素, $idx代表数组中的索引 -->
 4     <div class="tutorial-row" for="{{list}}">
 5       <text>{{$idx}}.{{$item.name}}</text>
 6     </div> 
 7   </div>
 8 </template>
 9 
10 <style lang="less">
11   .tutorial-page {
12     flex-direction: column;
13     .tutorial-row {
14       width: 85%;
15       margin-top: 10px;
16       margin-bottom: 10px;
17     }
18   }
19 </style>
20 
21 <script>
22   export default {
23     private: {
24       list: [
25         {name: 'aa'},
26         { name: 'bb' }
27       ]
28     },
29     onInit () {
30       this.$page.setTitleBar({ text: '指令for' })
31     }
32   }
33 </script>

支持生命周期。

支持路由。

支持组件化。

支持父子组件props传递数据。

支持全局数据对象。

支持大量的功能模块,可自行探索。

。。。

6:前人经验:有很多人遇到了很多问题,你可以在版块的问答分类下看看其他人遇到的问题及如此解决的;http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&page=2&filter=author&orderby=dateline&typeid=16

我只能说这个文档不是很人性化,左侧导航栏分了『指南和参考』,结果我最关心的组件,在『指南』中只有list和tabs,其余组件都在『参考』中,真是喷了一口老血才找到。

根据观察,很多公司因为不了解小程序,而导致盲目跟进而盲目开发,无法有效利用小程序的特性,甚至白白浪费了开发周期;
事前准备:

2)开发文档

选择无appid,即可在没有appid情况下进行开发,但是无法预览;

华为开发工具

因为都是可视化操作,操作起来很简单。

首先新建一个项目,选择对应模板。

 

图片 1

然后就可以开始开发了。。。

具体工具使用参考如下链接

 

4:https,这个坑目前遇到的人最多,首先说明一下,工具的这个设置,

根据开发微信小程序和支付宝小程序的经验,我习惯性的按照以下步骤去做准备:

个人开发和学习的同学,最关心的是个人额能不能申请和发布,目前的答案是:不能发布,但是可以开发;

1)开发工具

https排查说明:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648

开题先抛一个快应用的开发文档链接

9:使用搜索;现在本站聚合了大量的微信小程序相关内容,可以考虑使用本站的搜索,来获取自己想找的东西或用于解决问题,搜索时,请使用主要关键词,或相近关键词进行搜索,而不要直接搜索一句话,比如你需要appid,你可以搜索“appid”,你遇到了登陆问题,应该搜索“登陆”,真机预览遇到了问题,可以搜索“真机”,遇到了上传问题,可以搜索“uploadfile”

3)示例代码

《一》开发准备,开发工具使用简介,工程目录结构 …
《二》开发组件使用初步,配置
《三》APP生命周期
《四》页面生命周期和参数传递
《五》布局基础
程序员实战系列:
程序员开发实战系列《一》注册、预览小程序
程序员开发实战系列《二》微信小程序架构篇
程序员开发实战系列《三》App()和Page()
程序员开发实战系列《四》视图层WXML绑定数据、模板、逻辑
程序员开发实战系列《五》视图层WXML:事件

https://doc.quickapp.cn/

@jsh5css :
1、首先要通读一遍官方文档,看看都有哪些东西,都能干什么;
2、对感兴趣的部分,把例子抠出来放到IDE上面运行一下,运行没问题就自己折腾折腾例子
3、自己写个demo,遇到困难当然就来小程序联盟啦,找找看有没有类似的demo
4、每天进论坛看看有什么新帖子

4)开始编程

六:新手学习可选系列:任选其一即可;


7:你必须通过微信认证,才可以使用微信支付等功能:认证指引:https://mp.weixin.qq.com/debug/wxadoc/product/renzheng.html?t=201714

7:无法登陆:参考@M-信念 同学的建议:可以稍微等等;当出现帐号登陆问题时,可以尝试使用他人微信号,或是咨询其他人是否也遇到了相同的情况,不要着急;

3:如何设置体验者/开发者/体验版本/:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1248

2:字母拼错,包括字母拼写错误,大小写没有注意;微信小程序中,有大量这样的代码示例,从中间冒出一个大写,比如支付中的appId

1:小程序没有入口,这和公众号一样。

1:看文档,尤其是版本更新后,可能文档已经更新,附上了你问题的说明;
2:群内问,群是一个比较好的途径,但是只能解决较为简单的问题;
3:论坛搜索;你可以在本站或官方社区内搜索相应的关键词,来查看是否有解决方案;你可以在这里查看搜索方法:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1824
4:发帖询问,在综合交流区内发帖询问,并@几个大神;

4:快捷键列表:

1:ES6;使用es6可能导致安卓端真机调试时很多问题出现,还有其他未知问题;原因未知;

@Somnus13 :

4:无须卸载:小程序看起来是程序,但是它以完全不同于过去APP的形状出现,它有更灵活的应用组织形态;

七:如何解决学习过程中的问题

项目目录:1:如果你选择了一个demo导入,请选择app.json所在的根目录文件夹,请勿选择其上级文件夹,否则会报错:找不到app.json;2:如果你想新建一个项目,请先在电脑内新建一个空文件夹,选择空文件夹即可,假如你选择的不是空文件夹,可能无法看到新建quickstart项目;

上传:管理员上传至后台,设置体验及审核版本使用;

3:小程序不会有订阅的关系

图片 2

6:遇到无法解决或难以理解的难题时,请在官方社区内进行反馈:https://developers.weixin.qq.com

正常思路啊 首先是静态页面数据展示 然后是页面跳转 然后就会考虑带参数实现详情页面 然后。。。
找一个熟悉的逻辑 开始模仿 然后就会一步步往前走了

至此,你应该会修改一些基本的属性了,剩下的开始遇到问题,开始跳坑:以下是最新的坑十个:
跳坑《七十二》编译.wxm文件错误,使用coolsite360报内部错误
跳坑指南《七十一》微信小程序真机预览跟本地不同的问题
跳坑指南《七十》如何让微信小程序服务类目审核通过
跳坑六十九:uploadFile:fail Error: unable to verify the first certificate
跳坑《六十八》Cannot read property ‘webviewId’ of undefined
新手跳坑指南《六十七》字体文件无法找到报404错误
新手跳坑指南《六十六》:路径path坑;相对路径与绝对路径
跳坑《六十四》出现脚本错误或未正确调用Page()
跳坑指南《六十四》小程序的登录号注册腾讯云问题
新手跳坑指南《六十三》wx.navigateTo 和 wx.redirectTo跳转报错

开发详解系列:

特别提示:微信小程序开发者工具版本及推出日期:

官方问答精选《十三》异步改变dada的值,给对象动态赋值
官方问答精选《十二》wx.checkSession,服务号和小程序用户…
官方问答精选《十一》后台服务器配置https,获取canvas的尺寸
官方问答精选《十》打通微信账号和系统用户账号,SVG支持
官方问答精选《九》js如何获取当前组件的宽高,wx.openDocument
官方问答精选《八》wx.showToast()无效,分享功能真机没有效果
官方问答精选《七》体验者安卓卡在加载页面进不去
官方问答精选《六》this.setData,动态改变navigationBarTitleText值
官方问答精选《五》图片读取失败,picker-view 初始值设置…
官方问答精选《四》分享连接传入的参数,用户数据解密…
官方问答精选《三》版本更新特别版:编译显示自定义预览
官方问答精选《二》Linux版,UnionId,苹果手机组件参数问题
官方问答精选系列《一》提交审核时提供测试账密码

格式调整
Ctrl+S:保存文件(必须保存才可以看到效果)
Ctrl+[, Ctrl+]:代码行缩进
Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
Shift+Alt+F:代码格式化
Alt+Up,Alt+Down:上下移动一行
Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
Ctrl+Shift+Enter:在当前行上方插入一行
Ctrl+Shift+F:全局搜索
光标相关
Ctrl+End:移动到文件结尾
Ctrl+Home:移动到文件开头
Ctrl+i:选中当前行
Shift+End:选择从光标到行尾
Shift+Home:选择从行首到光标处
Ctrl+Shift+L:选中所有匹配
Ctrl+D:选中匹配
Ctrl+U:光标回退
界面相关
Ctrl + :隐藏侧边栏
Ctrl + m: 打开或者隐藏模拟器

压缩代码:为了节约空间,小程序上限为1M:参考:http://www.wxapp-union.com/portal.php?mod=view&aid=934

图片 3

三:如何学习微信小程序

学习记录系列:
微信小程序学习记录《一》:目录结构介绍,开发工具菜单介绍
微信小程序学习记录《二》:系统配置app.json,程序和页面注册.js
微信小程序学习记录《三》:视图容器
现学现卖系列
现学现卖微信小程序开发(二)
现学现卖微信小程序开发(一)开始

2:如何真机预览:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1812

图片 4
4:微信小程序的问答

本文由金沙官网线上发布于Web前端,转载请注明出处:快应用小试

您可能还会对下面的文章感兴趣: