前端系列——微信小程序开发(前端微信小程序开发流程)

1、微信小程序的注册和微信开发者工具的下载

在微信公众平台注册小程序账号,注册时注意小程序和公众号不能使用同一个帐号,登录小程序时,公众号会自动下线。一般账号为邮箱号,所以提前准备俩邮箱号,方便注册。注册号一号进入如下界面:

前端系列——微信小程序开发(前端微信小程序开发流程)

可以完善小程序信息,以及实名认证等,这些都是傻瓜式的操作,懂汉语就行,不知道在哪里就多试试,试试又不怀孕!

然后下载你开发的工具:

前端系列——微信小程序开发(前端微信小程序开发流程)

下载完成后安装即可。

2、创建项目

进入开发工具界面,新建开发项目:

前端系列——微信小程序开发(前端微信小程序开发流程)

这里会自动生成一些文件夹,下面是文件夹的具体说明:

pages:存放项目页面文件,一般一个目录对应一个页面。

utils:存放工具函数(一般是自己封装)。

app.js:全局的逻辑处理

app.json: (1)页面文件路径设置

(2)窗口外观设置

(3)设置/添加tabbar(底部/顶部导航)

app.wxss:全局样式

project.config.json:项目配置文件

sitemap.json:小程序内搜索,开发者可以通过 `sitemap.json` 配置,或者管理后台页面收录开关来配置其小程 序页面是否允许微信索引

前端系列——微信小程序开发(前端微信小程序开发流程)

小程序中.wxml对应的是html文件,.wxss对应的是css文件。

文件夹中文件组成:

home.js:逻辑处理

home.json:静态数据

home.wxml:页面结构

home.wxss:页面布局

3、利用tabBar设置小程序的菜单导航

上面写到设置、添加tabBar在app.json文件中,所以在此文件中设置需要的菜单导航,以及引入需要的图标。这里可以将整个项目中用到的小图标在阿里图标库中进行添加,跟vue项目中一样,然后下载到本地,将对应的文件复制到项目文件中即可。

前端系列——微信小程序开发(前端微信小程序开发流程)

这里一般设置三个导航项,iconPath为默认未点击时显示的图标路径,selectedIconPath为选择点击后的图片路径。效果如下图:

前端系列——微信小程序开发(前端微信小程序开发流程)

如果想让导航位置位于整个页面的上方,可以将tabBar中的position属性设置为top即可。

前端系列——微信小程序开发(前端微信小程序开发流程)

这里拷贝一下微信官方文档内容,供大家参考:

前端系列——微信小程序开发(前端微信小程序开发流程)前端系列——微信小程序开发(前端微信小程序开发流程)前端系列——微信小程序开发(前端微信小程序开发流程)

4、全局设置

前端系列——微信小程序开发(前端微信小程序开发流程)

backgroundTextStyle string dark——下拉 loading 的样式,仅支持 dark / light

avigationBarBackgroundColor HexColor #000000——导航栏背景颜色,如 #000000

navigationBarTitleText string——导航栏标题文字内容

navigationBarTextStyle string white——导航栏标题颜色,仅支持 black / white

复制快捷键:

向下:Alt Shift 向下光标键

向上:Alt Shift 向上光标键

5、应用头部布局

由于空间较小等,我们可能在“开发者工具”中开发不太习惯,这时我们可以在其他软件中进行开发,如webstorm中,只需要安装WeChat weapp Support插件。

如需要微信小程序中默认的小图标:

前端系列——微信小程序开发(前端微信小程序开发流程)

用如下icon标签引入即可(这里引入了搜素图标):

前端系列——微信小程序开发(前端微信小程序开发流程)

6、数据请求和页面跳转

在基本布局和样式完成后,就是请求数据和渲染界面。

请求后台api接口数据一般封装一个工具函数,因为有很多页面要请求数据。工具函数的封装大概如下:

前端系列——微信小程序开发(前端微信小程序开发流程)

然后就是在页面引入使用它:

前端系列——微信小程序开发(前端微信小程序开发流程)

接下来就是如下所示的一些数据渲染:

前端系列——微信小程序开发(前端微信小程序开发流程)

在一些页面中要实现页面间的跳转,微信小程序中用bindtap,相当于绑定一个点击事件,然后在对应的js文件中写入需要跳转的页面路径:

前端系列——微信小程序开发(前端微信小程序开发流程)前端系列——微信小程序开发(前端微信小程序开发流程)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月10日 上午8:22
下一篇 2024年5月10日 上午8:34

相关推荐

  • 快播小方盒子看直播、装软件,一次解决多年的后顾之忧(快播小方参数)

    影视快搜资讯:快播小方盒子看直播必须要选择一款好的电视直播软件,直播软件界的“大佬”——影视快搜,作为今天的主角,为大家分享快播小方盒子装软件、看直播的几种方法。 方法一:U盘安装…

    科研百科 2023年4月18日
    363
  • 项目管理决策支持系统

    项目管理决策支持系统 项目管理作为一项关键任务,对于组织的成功至关重要。但是,在实施项目管理时,由于项目的复杂性和不确定性,往往需要进行大量的决策。这些决策可能涉及项目的范围、时间…

    科研百科 2025年1月21日
    2
  • 合同管理安排

    合同管理安排 随着企业规模的不断扩大和业务的不断发展,合同管理成为了企业管理中不可或缺的一部分。合同管理不仅仅是合同的收取、整理、归档和销毁,更重要的是合同的签署、执行、变更和终止…

    科研百科 2025年1月6日
    1
  • 科研项目主要内容模板

    科研项目主要内容模板 本文主要介绍了一个科研项目的主要内容模板,旨在帮助研究人员更好地组织自己的科研项目,并确保项目内容的清晰和有条理。 科研项目主要内容模板通常包括以下几个部分:…

    科研百科 2025年2月2日
    2
  • 票务管理系统项目总结

    票务管理系统项目总结 随着现代旅游业的不断发展,票务管理系统已经成为旅游业中必不可少的工具之一。本文将介绍我们团队所开发的票务管理系统,并对其进行总结。 项目概述 我们的票务管理系…

    科研百科 2025年6月12日
    0
  • 政府oa协同办公

    政府oa协同办公: 促进政府高效协同的关键技术 随着信息技术的不断发展,政府oa协同办公已成为现代政府管理中不可或缺的一部分。政府oa协同办公是指政府内部各个部门通过oa办公软件进…

    科研百科 2024年9月23日
    20
  • 科技部对军工科研项目审计科技部对军工科研项目审计

    科技部对军工科研项目审计 随着科技的不断进步,军工领域也越来越受到国家的重视。作为国家安全的重要组成部分,军工科研项目的安全问题也日益突出。为了保障军工科研项目的安全和可靠性,科技…

    科研百科 2024年9月9日
    21
  • 科研项目走账流程图

    科研项目走账流程图 科研项目的走账流程图是对科研项目资金筹集、分配和使用的过程的可视化展示。在项目中,资金通常是通过走账流程来使用的。 以下是科研项目走账流程图的一般步骤: 1. …

    科研百科 2025年4月22日
    2
  • 涉案870多万!公司出售软件非法爬取1.6亿条数据(出售软件违法吗)_1

    来源:荔枝新闻微博 2022年,浙江某公司反映江苏一家公司涉嫌通过销售“上货助手”等软件非法爬取数据,购买者通过该软件自动抓取其他平台上的商品图片、信息等,侵犯了其他平台的合法权益…

    科研百科 2023年5月28日
    107
  • 科研项目自营

    科研项目自营是一种新兴的科研方式,它通过自主管理科研项目的方式,让研究人员能够更加专注于科研的研究和探索,从而提高科研项目的质量和效率。 在科研项目自营中,研究人员负责整个项目的规…

    科研百科 2025年2月19日
    1