微信小程序学习笔记(二)

微信小程序学习笔记(二)
视图与渲染
1.组件的基本使用
新建一个项目之后,先在page文件里新建一个文件firstPage,然后在文件firstPage里新建first.js和first.wxml,之后在app.json里面新添加代码"pages/firstPage/first",运行后会发现错误,原因是在page里面没有调用page方法,所以在first.js里面添加要调用的page的方法,然后在first.wxml里面随便输入一些东西,再调试,屏幕上就会出现你输入的东西了。这说明我们的页面已经被正常的加载了。
在这里插入图片描述在这里插入图片描述
【1】view标签:(相当于的div标签)
(1)hover-class指定按下去的样式,比如值是none就是没有点击效果
(2)hover-stop-propagation是否阻止事件冒泡(3)hover-start-time多长时间后出现点击状态(4)hover-stay-time手松开后保留点击状态多长时间
【2】text标签:(相当于span标签,文本标签,只能够嵌套自己,只有这个标签可以实现长按文字复制,可以对空格,大于号小于号等进行编码)
(1)selectable长按文字复制
(2)decode对文本内容进行编码
【3】button标签:
(1)外观属性(可以自己编写按钮的样式):默认按钮
size是控制按钮的大小,包含两个值,default是默认大小,mini是小尺寸
type是控制按钮的颜色,primary是绿色,default是白色,warn是红色
plain是控制按钮是否镂空
loading是名称前是否带loading图标
在这里插入图片描述 (2)开发能力open-type (a)contact是直接打开客服对话功能,需要在微信小程序的后台进行配置 (b)share是转发当前的小程序到微信朋友中, 不能把小程序分享到朋友圈中 (c)getPhoneNumber是获取当前用户的手机号码信息,结合一个时间来使用,不是企业的小程序账号是没有权限获取用户的手机号码绑定一个事件 bindgetphonenumber,在事件的回调函数中通过参数来获取信息(当用户点击拒绝获取信息的时候,一样的有这些值打印出来,展开后会看到detail属性有个错误信息写着用户拒绝获取;允许后展开,会有代码表示已经加密过了,无法直接获取,需要用户自己待见小程序后台服务器,在服务器中进行解析,手机号码,赶回到小程序中,就可以看到信息了) (d)getUserInfo是获取当前用户的个人信息使用方法类似获取用户的手机号码,可以直接获取不存在加密字段 (e)launchApp是在小程序当中直接打开APP需要现在APP中通过APP的某个链接打开小程序,在小程序中再通过这个功能重新打开APP,可以找到京东的APP和京东的小程序再来演示 (f)openSetting是打开小程序内置的授权页面授权页面中只会出现用户曾经点击过的权限 (g)feedback是打开小程序中内置的意见反馈意见只能够通过真机调试来打开 2.数据绑定 js文件中把页面中显示的数据都放在data,比如: (a)字符串msg:“hello”, 在wxml中{{msg}},就会显示hello了最开始在data中定义了一个属性叫msg,它的值是一个字符串hello,就可以直接在标签中通过花括号{{}}的方式来渲染 (b)数字类型num:10000 {{num}},会显示10000 (c)Boolean类型isFruit:false (d)object类型person:{age:16} {{person}}这时只会显示object,只有把里面的属性写出来才会显示, {{person.age}},会显示16 (e)在标签的属性中使用自定义属性(要拿引号括住)在控制台的wxml中会看到 (f)使用bool类型充当属性 checked字符串和花括号之间不要有空格,会导致识别失败,错误例子: checkbox是单选框