手机网站做落地页,外贸企业网站,网站建设与制作实验报告,国学底蕴的公司名字微信小程序介绍- 链接
微信小程序#xff0c;简称小程序#xff0c;是一种不需要下载安装即可使用的应用#xff0c;它实现了应用“触手可及”的梦想#xff0c;用户扫一扫或搜一下即可打开应用
1. 为什么是微信小程序?
微信有海量用户#xff0c;而且粘性很高#x…微信小程序介绍- 链接
微信小程序简称小程序是一种不需要下载安装即可使用的应用它实现了应用“触手可及”的梦想用户扫一扫或搜一下即可打开应用
1. 为什么是微信小程序?
微信有海量用户而且粘性很高在微信里开发产品更容易触达用户。推广app 或公众号的成本太高。开发适配成本低。容易小规模试错然后快速迭代。跨平台。
2. 微信小程序历史
2016年1月11日微信之父张小龙时隔多年的公开亮相解读了微信的四大价值观。张小龙指出越来越多产品通过公众号来做因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务所以微信内部正在研究新的形态叫**「微信小程序」** 需要注意的是之前是叫做 应用号2016年9月21日微信小程序正式开启内测。在微信生态下触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案提供小程序在云端服务器的技术方案。2017年1月9日微信推出的“小程序”正式上线。“小程序”是一种无需安装即可使用的手机“应用”。不需要像往常一样下载App用户在微信中“用完即走”。
3. 疯狂的微信小程序
微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万信息传达数达到450亿小程序覆盖超过200行业交易额增长超过6倍服务1000亿人次,创造出了5000亿的商业价值
4. 还有其他的小程序
支付宝小程序22百度小程序QQ小程序今日头条 抖音小程序
5.官方微信小程序体验
小程序示例源码
2准备
1. 注册账号 建议使用全新的邮箱没有注册过其他小程序或者公众号的。 访问注册页面耐心完成注册即可。
2. 获取APPID 由于后期调用微信小程序的接口等功能需要索取开发者的小程序中的APPID所以在注册成功后可登录然后获取APPID。 登录成功后 开发 开发设置 获取 AppID
3. 开发工具 下载地址 微信小程序自带开发者工具集 开发 预览 调试 发布 于一身的 完整环境。
第一个微信小程序
####1. 打开微信开发者工具
注意 第一次登录的时候 需要扫码登录 2. 新建小程序项目 3. 填写项目信息 微信开发者工具介绍 小程序结构目录
1. 小程序文件结构和传统web对比
结构传统web微信小程序结构HTMLWXML样式CSSWXSS逻辑JavascriptJavascript配置无JSON
通过以上对比得出传统web 是三层结构。而微信小程序 是四层结构多了一层 配置.json
####2. 基本的项目目录 小程序配置文件 一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json 注意配置文件中不能出现注释
1. 全局配置 app.json app.json配置 app.json 是当前小程序的全局配置包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{pages:[pages/index/index,pages/logs/logs],window:{navigationBarBackgroundColor: #f00, navigationBarTextStyle : black, navigationBarTitleText: 小马哥,navigationStyle : default,backgroundColor : #0f0,backgroundTextStyle : dark,enablePullDownRefresh : false,backgroundColorTop : #00f, // 窗口顶部背景 真机调试 仅ios backgroundColorBottom : #f00, // 窗口底部背景 真机调试 仅ios pageOrientation: auto}
}字段的含义
pages字段 —— 用于描述当前小程序所有页面路径这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段 —— 定义小程序所有页面的顶部背景颜色文字颜色定义等。tabBar字段 – 详见底部 tab 栏
####2. 页面配置 page.json page.json 这里的 app.json 其实用来表示该小程序页面相关的配置 页面的配置只能设置 app.json 中部分 window 配置项的内容, 页面中配置会覆盖 app.json 的 window 中相同的配置项
属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色如 #000000navigationBarTextStyleStringwhite导航栏标题颜色仅支持 black / whitenavigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新。 详见 Page.onPullDownRefreshonReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位为px。 详见 Page.onReachBottomdisableScrollBooleanfalse设置为 true 则页面整体不能上下滚动只在页面配置中有效无法在 app.json 中设置该项 (备:类似overflow:hidden)学小程序 组件api 常见组件
重点讲解小程序中常用的布局组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。等
1. view
视图容器 - 相当于之前的 div属性 : hover-class 指定按下去的样式类
view hover-classh-class点击我试试
/view2. text
文本标签 - 相当于之前 span特殊用法 : 长按文字可以复制 (只有该标签有这个功能) 设置true 才可以选择, 手机预览测试效果 可以对空格 回车 进行编码
属性名类型默认值说明selectableBooleanfalse文本是否可选decodeBooleanfalse是否解码
代码
//1.1 不可以选择
text测试选择/text
//1.2 可以选择 (手机测试)
text selectable{{ true }}测试选择/text//2.1 显示空格失败 : 结果 姓nbsp;名
text姓nbsp;名/text
//2.2 显示空格成功 : 结果 姓 名
text decode姓nbsp;名/text//3 其他几个格式 -- 看图
text decode正ensp;正/text
text decode正emsp;正/text
text decode正nbsp;正/text使用场景
viewtext decode{{ true }}姓emsp;名/text
/view
viewtext产品名/text
/view3. icon
图标组件
属性类型默认值必填说明typestring是icon的类型有效值success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizenumber/string23否icon的大小colorstring否icon的颜色同css的color
代码 icon typesuccess size40 colorred/4. radio
单选框 需要 搭配 radio-group 一起使用
radio-group radio男/radioradio女/radio
/radio-group5. checkbox 多选框 需要 搭配 checkbox-group 一起使用
checkbox-groupcheckbox前端/checkboxcheckboxjava/checkbox
/checkbox-group6. image
图标标签 image 组件默认宽高 320*240 属性
属性名类型默认值说明srcString图片资源地址modeString‘scaleToFill’图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载
mode 有效值
值说明scaleToFill缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。aspectFill缩放模式保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。
使用场景
scaleToFill : 盒子尺寸和图片尺寸大小一样, 使用该模式aspectFit : 详情页顶部显示图片 (右)aspectFill : 列表item 使用该模式 (左)
//链接
viewimage modeaspectFit srchttp://img2.imgtn.bdimg.com/it/u1668465722,3535501153fm214gp0.jpg/image
/view
viewimage modeaspectFit srchttps://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u1018718673,2637294948fm26gp0.jpg/image
/view7. swiper 轮播图组件 默认宽度 100% 高度 150px
属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorColor#000000当前选中的指示点颜色autoplayBooleanfalse是否自动播放intervalNumber5000自动切换时间间隔circularBooleanfalse是否循环轮播swiper 滑块视图容器 swiper-item 滑块 打开淘宝使用 : m.taobao.com
8. navigator
导航组件 类似超链接标签
属性名类型默认值说明targetStringself在哪个目标上发生跳转默认当前小程序可选值self/miniProgramurlString当前小程序内的跳转链接open-typeStringnavigate跳转方式
open-type 有效值
值说明navigate保留当前页面跳转到应用内的某个页面但是不能跳到 tabbar 页面redirect关闭当前页面跳转到应用内的某个页面但是不允许跳转到 tabbar 页面。switchTab跳转到 tabBar 页面并关闭其他所有非 tabBar 页面reLaunch关闭所有页面打开到应用内的某个页面navigateBack关闭当前页面返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈决定需要返回几层exit退出小程序targetminiProgram时生效
9. rich-text 富文本标签 可以将html字符串解析成 对应标签类似 vue中 v-html功能 通过nodes属性来实现 接收标签字符串接收对象数组
nodes属性
nodes属性支持 字符串 和 标签节点数组
属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致
文本节点type text’
属性说明类型必填备注text文本string是支持entities
代码 // 标签字符串str :div stylecolor:red; 呵呵/div,// 对象数组str1 : [{name:div,attrs:{style:color:red;},children : [{type:text,text:哈哈}]}]// 使用
rich-text nodes{{ str1 }}/rich-text10. button buttontypedefaultsize{{defaultSize}}loading{{loading}}plain{{plain}}
default
/button属性类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类型plainbooleanfalse否按钮是否镂空背景色透明disabledbooleanfalse否是否禁用loadingbooleanfalse否名称前是否带 loading 图标form-typestring否用于form组件点击分别会触发 form 组件的 submit/reset 事件open-typestring否微信开放能力
size 的合法值
值说明default默认大小mini小尺寸
type 的合法值
值说明primary绿色default白色warn红色
form-type 的合法值
值说明submit提交表单reset重置表单
form bindsubmithandleinput namen1/inputinput namen2/inputbutton form-typesubmit重置/buttonbutton form-typereset重置/button
/formopen-type 的合法值
值说明contact打开客服会话需要在微信小程序的后台配置 (演示不了)share触发用户转发getPhoneNumber获取用户手机号不是企业的小程序账号 没有权限来获取用户的手机号码 (演示不了)getUserInfo获取用户信息可以从bindgetuserinfo回调中获取到用户信息launchApp打开APP 需要配合原生app (演示不了)openSetting打开授权设置页feedback打开“意见反馈”页面需要真机调试
