![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序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 · 178 阅读 · 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 · 189 阅读 · 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 · 124 阅读 · 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 · 97 阅读 · 0 评论 -
7. 小程序的事件绑定
小程序中绑定事件,通过bind关键字来实现。如:bindtap、bindinput、bindchange等.bindtap 相当于 vue中的@click点击事件 bindtab 是输入框输入事件 bindchange 是不同的组件支持不同的事件,具体看组件的说明即可。注意:无法在小程序当中的事件中直接传递参数,需要通过自定义属性的方式来传递参数<input value="" bindinput="handleInputMethod"/><button bindt原创 2021-06-29 17:39:39 · 760 阅读 · 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 · 109 阅读 · 0 评论 -
5. 小程序的配置文件
一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json 和 页面自己的 page.json注意:配置文件中不能出现注释!5.1 全局配置app.jsonapp.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。普通快速启动项目里边的app.json配置。{ "pages": [ "pages/img/img", "pages/index/index", "pages/search/search"原创 2021-06-29 17:22:29 · 272 阅读 · 0 评论 -
4. 小程序结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。小程序框架提供了自己的视图层描述语言WXML和WXSS,以及JavaScript,并在视图层和逻辑层之间提供了数据传输和事件系统,让开发者能够专注于数据和逻辑。4.1 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式原创 2021-06-29 17:16:36 · 69 阅读 · 0 评论 -
3. 微信开发者工具介绍
详细的使用,可以查看官网原创 2021-06-29 17:12:53 · 349 阅读 · 0 评论 -
2. 小程序环境准备
2.1 注册账号建议使用全新的邮箱,没有注册过其他小程序或者公众号的。访问注册页面,耐心完成注册即可。原创 2021-06-29 17:01:46 · 62 阅读 · 0 评论 -
1. 微信小程序介绍
微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及“的梦想,用户扫一扫或搜索一下即可打开应用。1.1 为什么是微信小程序?微信有海量用户,而且粘性很高,在微信里面开发产品更容易触达用户; 推广app或公众号的成本太高; 开发适配成本低; 容易小规模调试,然后快速迭代; 跨平台。1.2 微信小程序历史2016年1⽉11⽇,微信之⽗张⼩⻰时隔多年的公开亮相,解读了微信的四⼤价值观。张⼩⻰指出,越来越多产品通过公众号来原创 2021-06-29 16:57:22 · 267 阅读 · 0 评论