微信小程序
通过几个实战案例来讲解关于微信小程序的常用语法和基本操作
全干程序员demo
一名00后互联网开发从业者,现就职华中科技大学担任后端开发工程师.致力代码改变生活,公众号:全干程序员demo,欢迎各位大佬关注!
展开
-
微信小程序之页面的跳转与传递参数09
微信小程序之页面的跳转与传递参数08之前大概了解了小程序的布局和一些基本组件,现在我们如何让小程序的页面进行跳转?传统的web前端在html页面中定义一个a标签指定一个url路径便可以实现页面的跳转小程序中使用一个navigator标签即可<!--pages/Demo1/Demo1.wxml--><navigator url="../Demo2/Demo2">点击跳转到Demo2页面</navigator>点击文本链接,进入Demo2.原创 2020-11-08 21:48:53 · 177 阅读 · 0 评论 -
微信小程序之伸缩布局Flex08
微信小程序之伸缩布局Flex08参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex以前在网页开发过程中,布局一直是不可或缺的,从最早的表格布局,到后来的DIV+CSS布局,现在再到CSS3的伸缩布局。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。如下图:主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向.原创 2020-11-08 15:54:42 · 543 阅读 · 1 评论 -
微信小程序之界面交互API07
微信小程序之界面交互API07关于界面交互,在官方文档上提供了API来wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)!显示消息提示框参数Object object属性 类型 默认值 必填 说明 最低版本 title string 是 提示的内容 icon string 'success' 否 图标 image str...原创 2020-11-08 15:19:09 · 669 阅读 · 1 评论 -
微信小程序之基本组件06
微信小程序之基本组件06小程序的UI开发 也就是说我们对表示层进行的开发跟页面展示有关系(wxml+wxss),官方文档给我们提供了一些比较常用的组件,以及组件的属性和值.官方文档组件地址:https://developers.weixin.qq.com/miniprogram/dev/component/基本组件text基础库 1.0.0 开始支持,低版本需做兼容处理。文本。属性 类型 默认值 必填 说明 最低版本 selectab..原创 2020-11-08 15:00:35 · 188 阅读 · 1 评论 -
微信小程序之wxss05
微信小程序之wxss05WXSSWXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位 样式导入尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rp原创 2020-11-08 12:18:10 · 541 阅读 · 0 评论 -
微信小程序之单向数据流05
微信小程序之单向数据流05在我们熟知的前端框架中,比如AngularJS,VUE,里面都有双向绑定这个功能,但是在小程序中并没有提供数据的双向绑定,需要我们自己去实现.小程序中单向数据流过程图:步骤: 1.首先我们在页面上添加一个文本输入框,在下面在定义一个文本标签,思考如何将输入的数据和展示的数据同步 2.在我们的data中定义一个数据,通过输入框中的数据设置到data中,通过bindInput方法来进行监听(每次输入都会执行这个方法) 3.不能通过this.data.m...原创 2020-11-07 23:01:34 · 603 阅读 · 0 评论 -
微信小程序之事件的处理04
微信小程序之事件的处理04关于事件绑定我们在web开发的过程中,以一个最常见的点击事件为例 :<button onclick="chick()">点击此处</button>而在小程序中的事件并不叫点击,因为我们在使用小程序中是没有鼠标的,使用的是tap在父元素和子元素中会出现一些事件的冒泡,我们可以通过catch+时间名来进行阻止冒泡的发生关于事件传参在小程序中我们传递参数时不允许使用括号的,只能通过系统给我们的页面对象中的datase.原创 2020-11-07 22:37:27 · 119 阅读 · 0 评论 -
微信小程序之逻辑层与界面层03
微信小程序之逻辑层与界面层03逻辑层(JavaScript)在小程序中,我们认知的JavaScript是和小程序中的JavaScript是有些不同的1.小程序不是运行在游览器中的,所以是没有DOM和BOM对象的2.在小程序的Javascript中有一些额外的成员APP() 用于定义应用程序的实例对象Page() 用于定义对象getAPP() 用于获取到应用程序的实例对象getCurrentPages()用来获取当前页面的调用栈(数组,也就是最后一个也就是当前页面)wx对象原创 2020-11-07 21:56:34 · 505 阅读 · 0 评论 -
微信小程序之配置文件02
微信小程序之配置文件02小程序主要的配置文件可以分为俩个,第一个是我们根目录的app.json,另外一个是我们每一个page页面里面的.json文件.是一个声明式的配置文件,遵循json语法,主要用来去指定项目的一些信息.app.json通过官方文档可以看到app.json可以配置的一些属性page.json当我们进入页面时,page.json就会立马去执行里面所有的配置信息,如果App.json里面有包括对页面的配置信息,那么page.json将会把它覆盖掉...原创 2020-11-07 18:57:05 · 217 阅读 · 0 评论 -
微信小程序之项目结构01
微信小程序之项目结构01当我们新建一个空项目时,微信开发者工具会为我们自动勾选创建一个quickStart项目,也就是会为我们自动生成一个模板,来方便我们进行开发.quickStart项目结构:通过官方文档的一个app.json文件的框架来测试下页面的一个变化可以明显看到下面多出了俩个tab栏关于app.js文件可以明显看到里面定义了一些方法,这些方法是以一个参数在我们的App()中的我们通过将方法封装到obj中再传入到App()中,发现程序并...原创 2020-11-07 17:02:45 · 193 阅读 · 0 评论 -
微信小程序快速入门
微信小程序01微信小程序背景微信小程序是不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开的应用,在微信小程序的使用过程中,用户只增不减,很多的公司都开始研发属于自己的小程序在微信开发者工具中首先简单的介绍下目录结构:小程序文件结构和传统web对比配置介绍一个小程序应用会包括最基本的俩种配置文件.一种是全局的app.json和页面自己的page.json注意:配置文件中不能出现注释全局配置app.jsonapp....原创 2020-08-04 17:22:04 · 260 阅读 · 0 评论