微信小程序0基础学习
文章平均质量分 50
微信小程序从零开始
江湖上的程序员
好好学习,天天向上
展开
-
11. slot插槽
slot标签其实就是一个占位符 插槽 等到父组件调用子组件的时候再传递标签过来,最终这些被传递的标签就会替换slot插槽的位置 子组件页面: <!--components/Tabs.wxml--> <view class="tabs"> <view class="tabs_title"> <view wx:for="{{tabs}}" wx:key="id"原创 2021-06-30 09:12:27 · 221 阅读 · 0 评论 -
10. 自定义组件
类似vue或者react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 10.1 创建自定义组件 类似于页面,一个自定义组件由.json/ .wxml / .wxss / .js 4个文件组成 可以在微信开发者工具中快速创建组件的文本结构 父组件的json文件: { "usingComponents": { "Tabs": "../../components/Tabs/Tabs" } } 父组件的wxml页面: <Tabs><原创 2021-06-29 18:59:16 · 229 阅读 · 0 评论 -
9. 常见组件
重点讲解小程序中常用的布局组件 view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox等。 9.1 view 替换HTML中的 div 标签 <view hover-class="h-class">点我试试看</view> 9.2 text 文本标签 只能嵌套text 长按文字可以复制(只有该标签有这个功能) 可以对空格、回车进行编码 属性名原创 2021-06-29 18:46:47 · 141 阅读 · 0 评论 -
8. 样式WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。 与 CSS 相⽐,WXSS 扩展的特性有: 响应式 ⻓度单位 rpx 样式导⼊ 8.1 尺寸单位 rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素, 1rpx = 0.5px = 1物理像素。 设备 r原创 2021-06-29 17:43:06 · 137 阅读 · 0 评论 -
7. 小程序的事件绑定
小程序中绑定事件,通过bind关键字来实现。如:bindtap、bindinput、bindchange等. bindtap 相当于 vue中的@click点击事件 bindtab 是输入框输入事件 bindchange 是 不同的组件支持不同的事件,具体看组件的说明即可。 注意:无法在小程序当中的事件中直接传递参数,需要通过自定义属性的方式来传递参数 <input value="" bindinput="handleInputMethod"/> <button bindt原创 2021-06-29 17:39:39 · 787 阅读 · 0 评论 -
6. 微信模板语法
WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构。 6.1 数据绑定 6.1.1 普通写法 <!--pages/img/img.wxml--> <text>pages/img/img.wxml</text> <text>pages/img/img.wxml</text> <view>{{message}}</view> <view&g原创 2021-06-29 17:37:02 · 154 阅读 · 0 评论 -
5. 小程序的配置文件
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json 和 页面自己的 page.json 注意:配置文件中不能出现注释! 5.1 全局配置app.json app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。普通快速启动项目里边的app.json配置。 { "pages": [ "pages/img/img", "pages/index/index", "pages/search/search"原创 2021-06-29 17:22:29 · 311 阅读 · 0 评论 -
4. 小程序结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。 小程序框架提供了自己的视图层描述语言WXML和WXSS,以及JavaScript,并在视图层和逻辑层之间提供了数据传输和事件系统,让开发者能够专注于数据和逻辑。 4.1 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式原创 2021-06-29 17:16:36 · 106 阅读 · 0 评论 -
3. 微信开发者工具介绍
详细的使用,可以查看官网原创 2021-06-29 17:12:53 · 390 阅读 · 0 评论 -
2. 小程序环境准备
2.1 注册账号 建议使用全新的邮箱,没有注册过其他小程序或者公众号的。 访问注册页面,耐心完成注册即可。原创 2021-06-29 17:01:46 · 80 阅读 · 0 评论 -
1. 微信小程序介绍
微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及“的梦想,用户扫一扫或搜索一下即可打开应用。 1.1 为什么是微信小程序? 微信有海量用户,而且粘性很高,在微信里面开发产品更容易触达用户; 推广app或公众号的成本太高; 开发适配成本低; 容易小规模调试,然后快速迭代; 跨平台。 1.2 微信小程序历史 2016年1⽉11⽇,微信之⽗张⼩⻰时隔多年的公开亮相,解读了微信的四⼤价值观。张⼩⻰指出,越来越多产品通过公众号来原创 2021-06-29 16:57:22 · 286 阅读 · 0 评论