详细的微信小程序学习笔记(从入门到项目)(1)
微信小程序(1)
准备工作
获取 AppID(小程序ID)
登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击开发设置 进行获取 AppID(小程序ID)
下载安装开发工具
开发工具下载地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
创建一个自己的微信小程序
完成上面之后,我们就拥有了一个 appID 与工具.
点击打开,工具 根据下面的信息进行填写,记的保证自己的版本的更新
了解工具的日常使用与文件构成
切换开发模式
当我们工作中在开发小程序的同时也在开发微信公众号 , 则必须进行切换开发者模式, 在顶部微信开发者工具中_–> 有更换开发者模式–>公众号网页调试
新增和修改编译模式
当我们需要修改 初始化时 显示的页面时, 则需要进行更改启动页面. 我们可以通过在 app.json 中的 pages 中 切换路径的顺序进行 切换(不推荐). 或者通过 在编译模式下 新增一个编译模式. 进行 切换.
预览和真机调试
预览调试:开发者可以通过手机扫描预览提供的二维码来访问小程序
真机调试:和预览一样会提供访问的二维码,不同的是真机调试模式会弹出控制台,可以查看手机模式下的调试信息
清除缓存
有选项的删除 缓存信息 清除本地的授权记录、sessionStorage和localStorage等缓存数据 .
右上角详情
则可以查看自己依赖的库是什么版本, 版本过低可能会影响使用注意版本库的选择,不要轻易去修改这个配置,很容易导致项目的api不兼容
小程序的文件结构介绍
基本的结构
- pages // 包含了所有页面- index // 页面文件夹- index.js // 页面的脚本逻辑文件- index.wxml // 页面模板文件- index.wxss // 页面样式文件- index.json // 页面配置文件 --->(重要)-如果有其他页面, 会在此生成
- utils // 普通的工具函数 -->(不需要注意)
- app.js // 项目启动入口
- app.json // 全局的配置 --->(重要)
- app.wxss // 全局样式
- project.config.json // 项目的配置文件
和web的页面结构比较:
文件 小程序 web
模板 .wxml .html
样式 .wxss .css
脚本 .js .js/script标签注意:微信小程序页面目录下,.js 和 .wxml 文件是必需的
项目的json文件配置
参考文档的地址
pages配置
pages 数组中的页面路径地址必须存在pages文件夹中
pages 数组中的页面路径地址下标为0,也就是第一个路径在普通编译模式下会作为启动页面,但不建议使用更换顺序的方式修改启动页, 可以通过新增或修改编译模式更改启动页
window配置示例
// app.json
{"window":{"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTextStyle": "black", // 导航栏标题颜色,仅支持 black / white"navigationBarTitleText": "weChart", // 导航栏标题文字内容"backgroundColor": "#fff", // 窗口的背景色"backgroundTextStyle": "light", // 下拉 loading 的样式,仅支持 dark / light"enablePullDownRefresh": true // 设置允许下拉刷新}
}注意: window的配置
1. navigationBarTextStyle导航栏标题颜色,仅支持 black / white
2. backgroundTextStyle下拉 loading 的样式,仅支持 dark / light
tab Bar 配置示例
// app.json
{"tabBar": {"color": "#000", // tab 上的文字默认颜色"selectedColor": "#000", // tab 上的文字选中时的颜色"backgroundColor": "#f5f5f5", // tab 的背景色"list": [{"pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义(必填)"text": "首页", // tab 上按钮文字(必填)"iconPath": "", // tab 上的图片路径,不支持网络图片"selectedIconPath": "" // 选中时的图片路径}, {"pagePath": "pages/logs/logs","text": "日志","iconPath": "", "selectedIconPath": "" }]}
}注意:配置了tabBar后,底部栏只对配置的页面可见, 而且tabBar的设置至少两个,最多5个
WXML 模板文件和组件
新建页面
1 通过app.json来新建 2 编辑器手动创建
wxml和html的不同点
- 标签名字不一样,如html里常用的标签 div、a、span等,在小程序里标签是view、navigator、text等,除了常用的元素块标签,小程序还提供了地图,视频,音频等组件
- 可以通过表达式{{ }}渲染状态数据
组件(不称为标签称为组件)
组件文档
组件共同属性类型
所有组件都有的属性:属性名 类型 描述 注解 id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式 hidden Boolean 组件是否显示 所有组件默认显示 data-* Any (任意属性) 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind* / catch* EventHandler 组件的事件 详见事件
组件的介绍
view (块级容器相当于 div)<view class="container"><!-- 页面内容 -->
</view>text (相当于 sapn)
注意: span中可以放置div 虽然不推荐, 但是 text 只能 放置其 自己
- 基础库版本低于 2.1.0 时, text 组件内嵌的 style 设置可能不会生效
- text组件内只支持 text 嵌套
- 除了文本节点以外的其他节点都无法长按选中
navigator
注意:
0 navigator是不能跳转至 外部链接的1 wep 中的a标签使用的是href 但是 微信小程序的组件 中的 则是 url 2 注意点是, 需要使用 绝对路径 ( / ) 在url前加 / 3 当你的 tabBar中 有使用 了哪个 页面的路径 需要跳转的话 必须添加 open-type :' switchTab ' 不然不会起作用open-type 常用的有效值redirect 覆盖当前页面switchTab 跳转到tabBar页navigateBack 关闭当前页面,返回上一页面 ( 设置这个值的话, 当你单击这个链接时会关闭当前的页面, 跳转回上一页面 但是 跳转的页面两个都有 在tabBar 就不能返回的)
<navigator url="/pages/demo/domo">跳转到demo
</navigator>
image图片组件
image的基本使用
<image style="width: 200px; height: 200px;mode="aspectFill" src="图片地址">
</image>注意:image组件默认宽度300px、高度240px 注2:image组件中二维码/小程序码图片不支持长按识别
常用的mode 有效值
- scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来
aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来
注意:微信朋友圈和QQ的说说页的图片裁剪方式,可以通过设置 `mode=aspectFill` 实现类似功能
form表单组件
form组件包含了以下常用的子组件
input 输入框组件label 表单字段说明组件checkbox 多项选择器组件radio 单项选择器组件button 按钮组件上述表单的子组件除了button都有name属性,给表单提供字段名的映射
input输入框组件
input的简单使用
<input placeholder="请输入文字" type="text"/>
input常用的属性
属性 类型 默认值 说明 value String 输入框的初始内容 type String "text" input 的类型password Boolean false 是否是密码类型 placeholder String 输入框为空时占位符disabled Boolean false 是否禁用
input type 有效值
值 说明
text 文本输入键盘
number 数字输入键盘 (手机号码)
idcard 身份证输入键盘
digit 带小数点的数字键盘(输入金额常用)
checkbox多选项和radio单选项的使用
当两个存在多个可选项时候需要使用checkbox-group或者radio-group
进行包裹-----> 不包裹的话会出现问题(比如单选框可以选中多个)
文档中有许多属性–> 更改颜色 选中状态等
checkbox组件文档
radio组件文档
button 按钮组件
button常用的属性
属性 类型 默认值 说明
size String default 按钮的大小 ( mini)
type String default 按钮的样式类型 ( primary绿色 warn 红色)
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
form-type String 用于form组件,可选值 submit/reset,触发form的提交和reset事件
form表单组件
form表单基本提交案例
第一步,设置button form-type='submit
第二步,通过bindsubmit设置form的提交事件处理函数
// wxml
<form bindsubmit="formSubmit"><input type="text" name="username" placeholder></input><button form-type="submit">提交</button>
</form>// js 中 配置 函数
formSubmit: function(e){console.log(e.detail.value)}
wxss样式
WXSS 对 CSS 进行了扩充以及修改,与 CSS 相比,WXSS 扩展的特性有:
尺寸单位
样式导入
选择器
rpx 尺寸单位
rpx可以使元素根据屏幕宽度进行自适应,小程序规定屏幕的宽度为750rpx, 也就是 100% = 750rpx; 50% = (750 / 2)rpx
其他自适应方法
web中使用rem,vw, 百分比
使用方法
在开发小程序是建议使用750像素宽度的设计稿,这样设计稿的元素宽度是多少像素就直接设置为多少rpx注意1rpx在某些屏幕上可能无效
样式导入
导入方法,参考weui-wxss提供的例子:
// 地址:https://github.com/Tencent/weui-wxss/blob/master/dist/app.wxss
@import 'style/weui.wxss';
详细的微信小程序学习笔记(从入门到项目)(1)相关推荐
- 微信小程序学习笔记(一)入门
思维导图 文章目录 1. 微信小程序简介 1.1 小程序与普通网页开发的区别 2. 小程序初体验 2.1 注册小程序开发帐号 2.2 开发者工具 2.2.1 了解微信开发者工具 2.2.2 下载开发者 ...
- 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记 自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明 自己的微信小程序学习笔记[2]--从零开始新建项目 文章目录 其他微信小程序的学习笔记 前言 一.Lin ...
- 微信小程序学习笔记(一)
干货来袭 基础前言 微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
- 微信小程序学习笔记(七)----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
- 微信小程序学习笔记( 小程序框架 )
必看 这个只是我的学习过程算是日记形式吧,过程是按微信的官方文档的循序来,从 指南中的小程序框架 开始,指南中这一节之前还有页面配置,目录结构,还有很多介绍,没有写但是是非常重要的,一定要看,像指南后 ...
- 微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
最新文章
- 安卓App热补丁动态修复技术:让App像Web一样发布新版本
- spring整合atomikos实现分布式事务的方法示例_分布式事务一:基于数据库原生分布式事务方案实现...
- C编程语言中运算符介绍
- python文件写入_python读写不同编码txt文件
- 【图像分割】基于matlab 2D水平集三维医学图像分割【含Matlab源码 584期】
- eclipse中debug断点上有一个斜杠是什么
- Scale和Resolution的相互转换算法
- vb/vb.net开发技巧荟萃(九)
- netbeans java中文_NetBeans添加中文javadoc
- 玩转Qml(12)-再谈动态国际化
- MyEclipse导入项目后报Unknown Faceted Project Problem (Java Version Mismatch)的解决方法
- python读取数据的函数详解_python如何从文件读取数据及解析
- 13个offer,8家SSP,谈谈秋招经验
- 什么是爬电距离?宽爬电距离光耦为什么越来越受大家青睐?
- 无法显示 隐藏文件 无法启动 杀毒软件 svohost exe CheckedValue Dword
- 单代号网络图计算例题_工程人如何绘制进度计划?(双代号网络图、横道图等)...
- 2018 in Restrospect
- python应用领域介绍 -- (python 真的很强大)
- 《Adobe Photoshop大师班:经典作品与完美技巧赏析》目录—导读
- 力扣253会议室II
热门文章
- Nutanix 组件要点摘录
- 2017年全国统考计算机英语,2017年全国II卷高考英语真题 2017全国II卷高考英语答案 (全文)...
- 阿里云ACK联合云效助力上海博卡DevOps转型
- word目录自动生成未定义标签问题解决
- Vue造成内存泄露的一些问题
- Git clone 报错:403 完美解决方案
- 【母函数|生成函数】学习母函数
- Python 中括号()、[]、{}的使用说明
- 电磁阀联锁开关的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 一个用Python编写的股票数据(沪深)爬虫和选股策略测试框架