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

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

在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差不多。然后跟着官方文档敲一般就入门了。

目录
相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
685 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
743 1
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
20 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
115 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
42 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
36 0
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
457 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
183 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
49 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
下一篇
DataWorks