| 微信小程序 知识总结【原生微信小程序】 | 您所在的位置：网站首页 › wxml样式属性名 › 微信小程序 知识总结【原生微信小程序】 |
微信小程序 知识总结【原生微信小程序】
|
小程序结构目录
小程序基础目录结构
小程序的4层结构 结构传统web微信小程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置无JSON简洁写法 app.js 和页面 index.js 最简洁的写法分别为： App({}) 和 Page({}) 复制代码 小程序全局配置和页面配置小程序配置文件是一种 json 格式的文件，可以起到快速新建页面、指定页面路径、设置导航栏和底部 tabBar 的作用。一个小程序最基本会包括页面配置和全局配置。 全局配置 全局配置 app.json 是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、超时时间、底部 tab 配置。 属性描述pages页面路径列表window全局的默认窗口表现tabBar底部 tab 栏的表现页面配置 页面配置文件 page.json 只能设置全局配置中关于 window 字段的功能。如设置页面标题、导航栏颜色等。 不用写 window 字段 优先级比全局配置高 小程序模板语法 数据绑定数据绑定也称为插值表达式，是一种将变量渲染到页面中的技术。 定义方式 在 index.js 文件当中有一个 Page({}) 配置对象，在里面创建 data 对象属性，里面定义变量。 Page({ /*** 页面的初始数据*/ data: { msg:'刀', index:'myclass', isRain: true } }) 复制代码使用方式 插值表达式完整写法 {{msg}} 复制代码 标签属性使用插值表达式 {{msg}} 复制代码作用：可以动态设置一个标签的显示和隐藏。 Page({ data: { isshow: true, ishidden: true } }) 复制代码wx:if ： wx:if 为真，显示标签；wx:if 为假，隐藏标签。 wx:if为true wx:if为false 复制代码hidden : hidden 为假，显示标签；hidden 为真，隐藏标签。 hidden为true hidden为false 复制代码注意： 使用条件渲染时双引号与双花括号之间不能有空白，否则会以 true 处理。
相同点 wx:if 与 hidden 都是控制结构的显示与隐藏。 不同点 wx:if 是通过移除添加结构来实现元素显示与隐藏。 hidden 是通过 display 样式来实现显示与隐藏。 列表渲染列表渲染可以很方便把数组数据渲染到页面中。
数组元素会被频繁修改，为了提高小程序重新渲染的效率，可以在渲染每一项时，指定一个唯一标识，方便小程序查找该元素。语法为： wx:key="" 复制代码wx:key 针对不同的数组类型有不同的写法： 普通数组：wx:key="*this" 。 {{i}}--{{v}} 复制代码 对象数组：wx:key="字符串" 。要有唯一标识的字符串，默认为id。 {{index}}--{{item.name}}--{{item.age}} 复制代码 小程序事件绑定 基本使用小程序绑定事件，是通过 bind 和 catch 关键字来实现的，如 bindtap 和 catchtap 。
在微信小程序中，事件传参不能使用普通的 函数名(参数) 的方式传参，控制台会报错。 报错显示，系统不认识 handeltap(222) 这个函数，显而易见，系统把这整个当作一个函数名了。怎么解决？ 在小程序中，传参一般通过自定义属性的方式来获取数据，代码如下：
简单数据类型 this.setData({属性名:属性值}) changeName() { this.setData({ msg: 'dao' }) }, 复制代码复杂数据类型 如果我们想删除复杂数据类型内某一个属性，可采用下面的代码： changeObj() { this.setData({ 'listObj[0].name' : 'daodao' }) }, 复制代码 小程序样式 全局样式和页面样式 后缀名为 wxss 。 分类全局样式：app.wxss 全局样式设置了之后每个页面都会生效。 页面样式：页面.wxss 页面样式设置了之后单个页面会生效，且会覆盖全局样式中一致的样式。 新的单位rpx规定：不管屏幕多少 px ，换算成 rpx 单位统一 750rpx 。 其中，rem 是网页 html 的单位，不能使用，但可以使用 vw 。 注意： 不能使用 rem 作为单位。 不支持通配符 * 。 小程序内置组件 image图片标签，默认大小为 320 * 240。 可通过 mode 属性控制渲染效果，具体参数看文档。 模式值说明缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素缩放aspectFit保持纵横比缩放图片，直到图片某一边碰到边界。缩放aspectFill保持纵横比缩放图片，直到图片完全铺满边界。缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变 可设置图片懒加载。 swiper轮播图标签，默认宽高为 100% * 150px。轮播图属性如下： 属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点autoplayBooleanfalse是否自动切换circularBooleanfalse是否衔接轮播注意： 轮播图 swiper 组件内必须设置 swiper-item 标签，用这个标签包裹其他需要的标签，不然无法生效。 swiper 与 image 相结合： 由于两者高度不统一，因此结合使用时需要我们去微调两者的高度，以便达到和谐的效果。 navigator导航标签，类似于超链接 a 标签，是一个块级元素。 用 url 指定要跳转到的当前小程序的页面。 想要设置 url ，必须跟上设置对应的 open-type 才能有对应的效果。 值说明navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面redirect关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面reLaunch关闭所有页面，打开到应用内的某个页面navigateBack关闭当前页面，返回上一页面或多级页面。注意： 跟 app.json 文件的 pages路径配置不一样，需要在前面加 / 。 用 target 指定要跳转到的其他小程序。 想要设置跳转到其他小程序，要设置 target="miniProgram" ，然后填写 short-link 或者 app-id 属性。 button 值说明contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息share触发用户转发getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 rich-text内置的富文本标签，通过传入 nodes 来使用。 data: { news: '刀刀新闻 大新闻！大新闻！' } 复制代码 复制代码根据接口文档，设置一个 user-select 属性可让用户复制文本。 text相当于 web 的 span 标签，行内元素。 view相当于 web 的 div 标签，块级元素。 radio单选框标签，通过 radio-group 包裹 radio 单选框标签实现布局。 radio-group ：有内置方法 bindchange ，radio-group 中选中项发生改变时触发 change 事件，通过 e.detail.value 获取。 radio ：通过绑定 value 属性实现。 {{item.name}} 复制代码 handlerChange(e) { console.log(e); } 复制代码 checkbox多选框标签，通过 checkbox-group 包裹 checkbox 单选框标签实现布局。 最外层用 checkbox-group 包裹，checkbox 本身定义 value 值，每当改变选择，最新被选择的 value 组成数组自动传入外层的 checkbox-group 标签的 change 事件参数中。 {{item.name}} 复制代码通过 disabled 设置禁用属性。 小程序自定义组件 自定义组件创建：创建一个文件夹 components 存储所有自定义组件，在这个文件夹中创建自定义组件的文件夹。 在组件的 wxml 文件中写结构，图片路径写自己的路径。 注册：在需要使用组件的文件的 json 文件中引入注册，注意路径问题。 使用：在该页面中引入。 父组件传递数据 父组件的数据： img: [ '../img/万叶.jpg', '../img/甘雨.jpg', '../img/魈.jpg' ] 复制代码父组件的结构： 复制代码子组件接收数据 在子组件的 js 文件中，接收数据。由于一开始子组件注册成为 components ，因此会有一个 properties 对象，相当于 props ，在这之中设置数据类型接收数据。 Component({ /** * 组件的属性列表 */ properties: { imageUrl: { type: String, value: '' } } }) 复制代码子组件使用数据 复制代码 子传父传递数据为子组件绑定点击事件 复制代码在子组件的 methods 中接收声明子传父的自定义事件，并把数据传递过去 methods: { getUrl() { this.triggerEvent('srcChange', this.properties.imageUrl) // console.log(this.properties.imageUrl); } } 复制代码在父组件中为子组件绑定自定义事件 复制代码在父组件的 js 文件中声明事件，用事件对象 e 来接收数据 showUrl(e) { console.log(e.detail); } 复制代码 小程序生命周期 应用生命周期 属性说明onLaunch生命周期回调——监听小程序初始化。onShow生命周期回调——监听小程序启动或切前台。onHide生命周期回调——监听小程序切后台。onError错误监听函数。onThemeChange监听系统主题变化 页面生命周期 属性说明onLoad生命周期回调—监听页面加载onShow生命周期回调—监听页面显示onReady生命周期回调—监听页面初次渲染完成onHide生命周期回调—监听页面隐藏onUnload生命周期回调—监听页面卸载onPullDownRefresh监听用户下拉动作onReachBottom页面上拉触底事件的处理函数onShareAppMessage用户点击右上角转发onShareTimeline用户点击右上角转发到朋友圈onAddToFavorites用户点击右上角收藏onPageScroll页面滚动触发事件的处理函数onResize页面尺寸改变时触发，详见 响应显示区域变化 组件生命周期 |
【本文地址】