如何从零开始搭建一款小程序?

  • 回答 (10)
  • 关注 (0)
  • 查看 (415)

求问,我想开发一款小程序,但是入门一直不知道怎么入门,求相关案例~

a563831029a563831029提问于
真假二十一很喜欢腾讯云!回答于

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。

在结构和样式方面,小程序提供了一些常用的标签与控件,比如:

view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view。

scroll-view,你要滚动内容的话,没必要用view去做overflow,scroll-view提供了更为强大的功能,通过参数的调整,你可以控制滚动方向,触发的事件等等

swiper,滑块视图容器,对于新手来说,再也不用为选用哪个滚动插件伤脑筋了

icon,小程序提供了多种图标供你直接使用

text,文本,唯一可以通过长按被选中内容的一个组件。

progress,进度条

button 按钮,尽量使用小程序提供给你的几种样式参数

表单以及常用表单组件 :form,input,checkbox,label,picker,radio,slider,switch

各种操作反馈,消息提示框:action-sheet,modal,toast,loading

以及一些媒体组件,video、audio,image,canvas等等

这些东西在几位前辈的文章里,以及微信的开发文档里都有更详细的介绍,我这里就不再一一介绍。

那么我们就快速的跑通一个小程序的demo先。

在开发之前你要有微信开发者工具,下载地址

这里我要假设大家有已经拿到了内测或者公测的资格,因为没有拿到的话下面的步骤是没法进行的。

打开以后你会看到这样的界面,我们选择小程序进入

这时候就可以创建项目了

填写你拿到的appid,和自己的项目名称以及目录,然后就可以打开自己的项目了。界面如下:

左侧菜单栏就不说了,中间是编译后的预览界面,新的开发者工具已经可以做到实时更新,不需要每次都去点编译了。

右侧是你的项目目录,其中pages就是你的页面结构目录了,每个页面下面必须要有 js,wxml,wxss这三个文件,缺少任何一个的话都无法上传预览。

然后就是那个当前态的app.json文件,app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。,我们简单的配置一下:

这里比较好的一点是,navigationbar的背景颜色支持自定义任意颜色了,不再有只能黑白透明的限制,还是很不错的。

然后我们在页面p里简单的写个Hello World

保存以后预览界面已经立即刷新出来

如果想真机测试(个人建议一定要真机测试,特别是给上下游预览的时候,pc上的样式还原程度较差,包括字体等等,毕竟系统不同。),只需要选中项目选项

然后在界面上点击预览

下面的三个选项都比较实用,可以根据需要点选。然后就会弹出可以用注册过的微信号真机预览的二维码,如图:

这样一个简单的小程序demo就完全跑通了。

回答过的其他问题

乘车码小程序中应用了腾讯云哪些黑科技?

真假二十一很喜欢腾讯云!
虽然他支付很方便快速,但在在安全性上,其实是完全不用担心的的,不存在被盗刷的风险。 在软件使用过程中,乘车码采用了多重加密防伪技术和动态刷新,可以有效防止黑客进行伪造、盗用,保障用户的资金安全。 应用上线前,腾讯云Web漏洞扫描对系统进行了全面漏洞检测,上线当日早上7:00整,网...... 展开详请

SSH连接服务器延迟太高,应如何解决?

真假二十一很喜欢腾讯云!
试试mosh!mosh是基于新的State Synchronization Protocol(SSP)协议,运行在UDP上,能同步不同主机对象的状态,加密和认证使用AES-128。在高延迟的网络下,mosh比ssh流畅很多。且在3G网络下,丢失网络变更IP后,终端连接不会中断。另...... 展开详请

腾讯云实验室适合新手么?

真假二十一很喜欢腾讯云!

就是适合于新手训练用的,步骤很详细,一步一步的跟着完成就好。

“org.jvnet.jaxb2.maven2”maven插件在eclipse中出现了错误?

真假二十一很喜欢腾讯云!
我找到了解决它的方法:将jaxb插d从“maven-jaxb2-plugin”更改为“maven-jaxb20-plugin”。请参阅:https://github.com/highsource/maven-jaxb2-plugin/wiki/Using-a-Specific-...... 展开详请

如何禁用gcc中未使用的变量警告?

真假二十一很喜欢腾讯云!
已采纳
该-Wno-unused-variable开关通常是卓有成效的。但是,如果你关心项目中的这些内容,那么这确实是一个非常有用的警告。 我建议你保持警告,但使用-isystem而不是-I第三方项目的包含目录。 ... 展开详请

用于Inno Setup中序列号的自定义页怎么实施?

真假二十一很喜欢腾讯云!
已采纳
以下是使用创建单独编辑框的自定义页面的一种方法。 [Setup] AppName=Serial number project AppVersion=1.0 DefaultDirName={pf}\Serial number project [code] function Se...... 展开详请

关于作者

所属标签

扫码关注云+社区

领取腾讯云代金券