小程序入门笔记(一) 黑马程序员前端微信小程序开发教程(下)

简介: 小程序入门笔记(一) 黑马程序员前端微信小程序开发教程(下)

在JSON配置文件中修改项目首页,通常需要找到相应的配置项并进行修改。具体的步骤取决于你使用的项目和框架。以下是一个示例,展示了如何在JSON配置文件中修改项目首页:

假设你的项目使用了Vue.js框架,并且使用了Vue Router进行路由管理。你可以按照以下步骤修改项目首页:

打开项目中的router.json文件或者类似的路由配置文件。

在JSON文件中找到routes数组,这个数组定义了项目的所有路由。

找到你想要修改的首页路由,通常它的path为/。

修改该路由的component属性,将其指向你新的首页组件。例如,将原来的Home组件修改为NewHome组件。

json
{
“routes”: [
{
“path”: “/”,
“component”: “NewHome”
},
// 其他路由…
]
}

保存文件并重新启动项目,现在你的项目首页应该会展示新的组件内容。

请注意,上述步骤只是一个示例,具体的操作取决于你使用的项目和框架。确保参考你项目和框架的文档来获取更准确的修改方式。

WXML(WeiXin Markup Language)

WXML(WeiXin Markup Language)是一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。它类似于网页开发中的HTML。在WXML文件中,开发者可以在组件(微信小程序中将“标签”称为“组件”)上定义特定的事件。当事件触发时,微信小程序就会执行逻辑层中对应的事件处理函数,来完成页面与用户的通信。

除了标签和事件,WXML还提供了一些特殊的属性,如wx:ifwx:elsewx:elif,用于条件渲染;wx:for用于列表渲染;wx:key可以指定列表中项目的唯一的标识符,这样可以在数据改变时,重新渲染指定的项目,而不是全量更新。

WXML与HTML的主要区别在于,WXML具有微信小程序的自定义组件和原生组件,比如<view><text><button>等,这些都是微信小程序特有的。此外,WXML的事件处理也与HTML有所不同,它采用的是bindtap、bindinput等方式来绑定事件,而不是HTML的onclick、oninput等方式。

总的来说,WXML是一种专为微信小程序设计的标记语言,它帮助开发者定义了微信小程序的用户界面和交互方式。

WXSS样式

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式,也就是用来决定WXML的组件应该怎么显示。

WXSS具有CSS的大部分特性,但是,WXSS新增了尺寸单位rpx,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可。此外,WXSS仅支持部分CSS选择器。

在WXSS中,可以选择使用全局样式或局部样式。全局样式会作用于当前小程序的所有页面,而局部页面样式仅对当前页面生效。

总的来说,WXSS是一种专为微信小程序设计的样式语言,它帮助开发者定义和控制微信小程序的用户界面样式。

WXSS与CSS的主要区别如下:

  1. 新增尺寸单位rpx:WXSS在CSS的基础上新增了一个尺寸单位rpx,它可以根据屏幕宽度自动进行换算,使得开发者在不同设备上无需进行复杂的换算操作。
  2. 选择器限制:WXSS仅支持部分CSS选择器,例如,它不支持伪类和伪元素选择器。
  3. 样式导入:WXSS不支持使用@import语句导入其他样式文件,但可以使用@import导入微信小程序的自定义样式库。
  4. 样式隔离:WXSS支持局部样式,这意味着在一个页面定义的样式只会作用于当前页面,不会影响其他页面。
  5. 样式优先级:在WXSS中,样式优先级遵循CSS的优先级规则,但增加了小程序自定义组件的样式优先级规则。

总的来说,WXSS是一种专为微信小程序设计的样式语言,它具有CSS的大部分特性,但也存在一些限制和新增的特性,以适应微信小程序的特殊需求。开发者在使用WXSS时应了解其特性与限制,以更好地控制微信小程序的界面样式。

js逻辑交互

在微信小程序中,JavaScript(JS)主要负责处理用户交互、数据管理和页面跳转等逻辑操作。以下是微信小程序中JS的一些主要功能:

  1. 页面注册:每个小程序页面都需要在JS文件中进行注册,包括页面的初始数据、生命周期函数、事件处理函数等。
  2. 数据绑定:JS可以通过WXML模板中的数据进行数据绑定,实现动态渲染页面内容。
  3. 事件处理:JS可以监听并处理用户交互事件,例如点击按钮、滑动页面等,通过事件处理函数来实现相应的逻辑操作。
  4. 网络请求:JS可以使用微信小程序提供的网络请求API,向后端发送请求并获取数据,实现前后端交互。
  5. 本地存储:JS可以使用微信小程序提供的本地存储API,将数据存储在本地,实现数据的持久化。
  6. 页面跳转:JS可以使用微信小程序提供的页面跳转API,实现页面之间的跳转和传参。
  7. 位置信息获取:JS可以使用微信小程序提供的位置信息获取API,获取用户的位置信息,实现基于位置的服务。
  8. 设备信息获取:JS可以使用微信小程序提供的设备信息获取API,获取用户的设备信息,如型号、操作系统等,实现个性化推荐等服务。

总的来说,JS在微信小程序中扮演着非常重要的角色,它负责处理用户交互、数据管理和页面跳转等逻辑操作,使得小程序能够实现复杂的功能和服务。开发者需要熟练掌握JS语言及其在微信小程序中的应用,以开发出高质量的小程序应用。

小程序的宿主环境

小程序的宿主环境是微信应用程序。微信小程序是一种内嵌在微信应用中的小程序,因此它的宿主环境就是微信应用本身。

微信小程序借助宿主环境微信提供的能力,可以完成微信支付、微信扫码、微信登录、地理定位等普通网页无法完成的功能。无论手机的系统是Android还是iOS,微信小程序的宿主环境都是微信(Android版微信和iOS版微信)。

小程序宿主环境包含的内容包括通信模型、运行机制、组件和API四个方面。其中,通信的主体是小程序中的渲染层和逻辑层,它们之间的通信以及逻辑层和第三方服务器之间的通信都由微信客户端进行转发。

此外,小程序宿主环境还提供了各种API和组件,供开发者使用。通过这些API和组件,开发者可以轻松地实现各种功能,如获取用户信息、支付、定位等。同时,小程序宿主环境还提供了一套完整的运行机制,包括小程序的启动、页面渲染等过程,确保小程序的正常运行。

总之,小程序的宿主环境是微信应用,它为小程序提供了各种功能和API,使得小程序能够实现复杂的功能和服务。开发者需要了解并熟练掌握小程序宿主环境的相关知识和技术,以开发出高质量的小程序应用。

https://www.bilibili.com/video/BV1WA411N75W/?spm_id_from=333.337.search-card.all.click&vd_source=3ef6540f8473c7367625a53b7b77fd66

小程序优势:1、免安装,使用方便;2、依托流量平台,打开率高,易搜索,易发现,易分享;3、开发成本低。

开发方法

1、原生开发——直接下载官方的开发者工具,参照官方提供的文档、视频教程和语法。

优点:上手相对容易,开发语法与api均能在文档中查到;出问题更容易定位和解决。

缺点:代码量大、组件少、语法不灵活、开发效率很低,且不同小程序平台语法不同。

2、框架开发——各种界面库与框架。

优点:使用代码更少甚至是直接使用现成的代码,采用前端编程语法和框架,提高了开发效率与代码的可维护性,使得代码更简洁。

界面库如如腾讯的weui、有赞的vantUI。直接按照文档学习、引入文件,选择自己需要的组件,搬运代码即可。

框架如腾讯的wepy、uniapp、美团mpvue均可使用类似前端vue开发框架的语法。

而熟悉react的同学,可尝试阿里的remax,京东的taro。

缺点:问题的排查成本高;框架有bug或无法支持的功能时,就很被动。

3、跨端开发(最主流)——在多个平台同步发布一个小程序。跨端开发框架使得写一套代码即可自动生成支持多个平台的小程序和h5页面。如uniapp(语法简单、组件库和插件丰富、生态好,受新手与vue开发者喜爱)、remax、taro(受react开发者喜爱)和chameleon均支持,部分还支持条件编辑(针对不同平台编写特殊逻辑)。

4、低代码开发——一个可视化页面平台,通过拖拽组件、输入配置来改变组件的样式和行为,再自动生成代码。如腾讯的WeDa。

优点:几乎无代码,连cv都不用。

5、云开发

优点:不用自己搭建后台,就能使用数据库和操作数据库的函数。即使只会前端,也能开发一个完整的小程序。

小程序也是前端,也是开发界面、交互以及一些数据请求的业务逻辑,只是语法略有区别。如微信小程序,基本语法和前端三件套HTML+JS+CSS相似。所以最后先学习前端web开发的基础知识。

最好先学习一个前端框架,如vue或者react。新手应该先用原生开发打基础,了解小程序的机制

个人建议学习路线

1-前期肯定是前端三大件。

2-学点nodejs,主要是为后期学习vue。需要要node环境安装脚手架vue-cli。

3-认真学习vue,熟悉vue中基本的vuex、router、axios。

4-最好再学小程序,你会发现。小程序整体思路和vue差不多。然后跟着官方文档敲一般就入门了。

目录
打赏
0
0
0
0
16
分享
相关文章
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
142 12
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
80 1
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
938 1
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
763 0
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
982 7
|
4月前
|
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
894 0
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
338 1
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1763 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    64
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 5
    巧用通义灵码,提升前端研发效率
    94
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    147
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    129
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等