1. 创业头条
  2. 前沿领域
  3. 企业应用
  4. 正文

小程序用什么开发?从零开始做一个微信小程序教程

 2018-07-11 11:29  来源:A5创业网  我来投稿 撤稿纠错

  一键部署OpenClaw

小程序用什么开发?A5创业网小编详细分享下从零开始做一个微信小程序的实战开发教程,希望对初期开发者会有所帮助。

开发前的准备工作:

首先需要注册一个小程序账号,用一个没注册过公众号的邮箱注册。注册过程中需要很多认证,比较繁琐。如果暂时只是试水、没有发布的打算,那么只要完成基本信息填写就可以,不需要完成微信认证。之后,就可以在公众平台使用注册的帐户进行登录。

在主页面左边列表中点击设置,再设置页面中选开发设置,就可以看到AppID。而AppID 可以用于在开发工具中进行登记,使用开发工具的高级功能。你可以到官网下载开发工具。

开始项目:

打开开发者工具,选择小程序选项,然后直接点击「添加项目」按钮。我们可以在这个步骤,填入刚才注册的时候使用的 AppID。

如果项目目录中的文件是个空文件夹,会提示是否创建 quick start 项目。

选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 Demo。

这个 Demo 拥有一个完整的小程序的大概框架。

1. 框架

我们首先看一下官方提供的 Demo 含有的目录:

app.js:小程序逻辑、生命周期、全局变量。

app.json:小程序公共设置、导航栏颜色等,不可以注释。

app.wxss:小程序公共样式,类似 CSS 。

小程序页面构成类似这样:

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json

微信小程序中的每一个页面的路径和页面文件名,都需要写在app.json的pages中,且pages数组中的第一个页面是小程序的首页。

这四个文件按照功能可以分成三个部分:

配置:json 文件

逻辑层:js 文件

视图层:wxss.wxml 文件

在 iOS 上,小程序的逻辑代码运行于 JavaScriptCore 中,而在 Android上,这个任务则是交给 X5 内核来完成。

在 开发工具上, 小程序的 JavaScript 代码是运行在 NW.js(Chrome 内核) 中。这也导致开发工具上的效果跟实际效果有所出入。

2. 组件

微信提供了许多组件,主要分为八种:

这其中,包含了view、scroll-view、button、form等普通常用的组件,也提供了地图mapcanvas

组件主要属于视图层,通过 WXML 来进行结构布局,类似于 HTML。样式则通过 WXSS 来定义和修改,它的语法和使用都近似 CSS。

组件使用语法实例:

<><>

3. API

网络

媒体

数据

位置

设备

界面

开发接口

网络请求接口包含了普通的 HTTPS 请求,支持上传、下载、Socket,基本上满足了我们开发中所需要的网络需求。

这些 API 属于逻辑层,写在 JS 逻辑文件中。

使用实例:

wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })

可以到官方文档 – API 查看其它 API 的使用方法。

编译运行

1. 模拟器调试

我们可以在微信提供的开发者工具中,使用模拟器查看小程序运行的效果。

之前我们提过,小程序的运行底层不同,这也导致在模拟器上的效果,会与在手机上运行有些差异。

2. 真机调试

在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫,就可以在真机上看实际效果。

更多小程序项目招商请访问:https://www.admin5.com/xm/list-1.html?xg

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

  • Meshy让3D模型能只改一块,圈住帽子说一句去掉就行

    Meshy在10月16日上线了MeshyEdit,做的是局部编辑,跑的是自研的新模型。用法是把生成好的3D模型打开,在要改的地方圈一块,用一句话说清想改成什么样,大约一分钟拿到一个新模型,没选中的部分保持原样。功能对全部注册用户开放。选区可以套索,圈住的整块部件会连背面一起覆盖;也可以拿画笔在可见表

  • 全国“空间标尺”统一了:首套覆盖全部陆地国土的几何基准影像发布,分辨率0.5米

    8月30日,自然资源部发布首套覆盖全部陆地国土的几何基准影像。全国空间分辨率整体达到0.5米,遥感影像定位精度整体提升1倍以上。这意味着,从南到北每一寸国土,第一次有了统一的“空间标尺”。说人话就是:过去各省、各单位用的遥感影像坐标基准不统一,同一块地,两家机构测出来的位置可能差出好几米。现在有了全

  • 添音生物新一代皮肤烟酸反应测试仪二类获批!NSR产品体系正持续升级

    近日,上海添音生物科技有限公司自主研发的新一代皮肤烟酸反应测试仪经上海市药品监督管理局批准注册,取得第二类医疗器械注册证(沪械注准20262070277)。该产品用于医疗机构,通过采集和分析皮肤烟酸反应图像,量化皮肤烟酸反应程度,为临床评估皮肤烟酸钝化反应提供参考。这是继皮肤烟酸反应测试仪(湘械注准

  • 别急着给中国Robotaxi泼冷水

    小马智行们,来到Robotaxi成熟前的最后关口

  • 吴林林专访郭玲丽:投入100亿支持AI发展

    2025国际人工智能程序设计精英挑战赛(IAEPC)在香港中文大学成功举办。来自深圳的学生吴林林作为主办方记者团成员,采访了大会嘉宾:香港特区政府立法会议员、IAEPC联合发起人郭玲丽议员。在吴林林的采访中,郭玲丽认为:在举办AI大赛、AI论坛以及吸引国际科技青年人才方面,香港具有独特的优势。郭玲丽

  • LTD枢纽云:信创“全面替换”门户、党群、经营管理类软件产品

    信创即信息技术创新,是指通过自主研发、技术创新等方式,实现信息技术的自主可控,降低对外部技术的依赖,提高国家信息安全保障能力。

  • 助力企业跑出数智升级加速度,828 B2B企业节系列直播火热开启

    第三届828B2B企业节正在全国如火如荼进行中。作为中国首个以“提升企业数字化能力、助力企业稳健快速成长”为目标的B2B企业节,828B2B企业节由华为云联合上万伙伴共同发起,目的是为了打通数字化供需天堑,让科技企业和有数转智改需求的中小企业能在一站购平台上完成对接,实现成就好生意,成为好企业的节日

  • 赵峰:提升销售领导力,实现业绩跨越式发展

    当今世界经济局势复杂多变,企业面临着越来越激烈的市场竞争。在生产方式不断随着科技水平的发展而提升的同时,各个行业企业产品之间的差距越来越小,企业单纯依靠产品很难在如今的市场竞争中取胜。因此,如何为企业寻求更加富有竞争力的销售能力提升办法,成为了企业普遍更加看重的问题。赵峰,现任北京正信启德管理顾问有

  • 穿越周期:解码2024年零售快消行业数字发展机密(附白皮书下载)

    零售经营者正处在一个历史性的转折点上。一方面,中国的零售产业已经发展到门店渠道饱和的状态,优胜劣汰会是零售产业未来一段时间内的主旋律;一方面,中国消费者的价值观出现了显著变化,零售快消市场已经进入“性价比时代”。为此,百望云总结服务诸多零售快消经营者的经验,集合产品与技术,推出了数字化解决方案,并取

  • 固态电池市场大爆发前夜 这家电池企业打响第一枪

    受限于三元材料以及磷酸铁锂电池在能量密度、安全性、循环寿命等多方面的限制,纯电汽车产品始终无法完成对传统燃油车的致命一击。在此背景下,优势明显的固态电池被寄予厚望,众多车企以及电池企业纷纷加码这一细分领域,以求占领技术制高点。目前,业界普遍将全固态电池小批量量产上车的时间节点定在2027年左右,大规

热门排行

编辑推荐