文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何快速开发一个小程序

2023-06-26 09:02

关注

本文小编为大家详细介绍“如何快速开发一个小程序”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何快速开发一个小程序”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

  注册小程序账号,下载IDE

  官方文档一向都是最好的学习资料。

  注意:

  (1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。

  (2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid。

  小程序框架介绍和运行机制

  1.我们建立了“普通快速启动模板”,然后整个项目目录如下:
如何快速开发一个小程序

  2.app.js

  整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。

  globalData是定义整个项目的全局变量或者常量。

  3.app.json

  整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面等等;

  !注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面。

  4.pages

  小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs

  5.打开index目录

  可以看到有三个文件,其实和我们web开发的文件是一一对应的。

  index.wxml对应index.html;

  index.wxss对应index.css;

  index.js就是js文件。

  一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面等功能

  6.双击index.js文件

  (1)var app = getApp();

  引入整个项目的app.js文件,用来取期中的公共变量等信息。

  如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到。

  (2)比如,我们要获取豆瓣电影的时候,我们需要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase

  然后在index.js中使用app.globaData.doubanBase即可取到这个值。

  当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中。

  (3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react~

  通过setData修改data数据,驱动页面渲染

  (4)一些生命周期函数

  比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等

  更多的可以查官网API。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)

  7 .wxml模板的使用。

  比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。

  star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

  8.常用的wxml标签

  view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

  小程序框架、各个页面以及发布上线的注意点

  1.整个框架中的一些注意点

  (1)整个wxml页面,最底层的标签是。

  (2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置。

  (3)json中不能写注释,不然会报错的。

  (4)路由相关

  1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效。

  注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开。

  2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册,不然同样也是不能跳转的。

  3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候。

  (5)页面之间传递参数

  参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

  (6)data-开头的自定义属性的使用

  比如wxml中我们怎么写

  点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

  注意: 大写会转换成小写,带_符号会转成驼峰形式

  (7)事件对象event,event.target和event.currentTarget的区别:

  target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

  比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

  这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

  (8)使用免费的网络接口:

  本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档,很详细的

  注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上

读到这里,这篇“如何快速开发一个小程序”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯