admin 管理员组文章数量: 887027
2023年12月21日发(作者：如何免费创建网站)
1.小程序的介绍
1)支持commonJS的用法
2)小程序中import与include的引用的使用
2.1)import引用
import可以在文件中使用目标文件定义的template，定义的文件不要在文件中出现页面的路径
在文件中定义一个叫item的template
在文件中import该模板:
结果如下：
结果中引入中的非template的代码块不会引入，而且只会引入是item的名称的代码块
2.2)include引用
include可以将目标文件除了之外的整个代码引入
结果如下：
2.小程序绑定数据的语法：(mustache语法)
1)在wxml(参照的是xml语法不是html)文件中
2)在相应的js文件中的Page中定义相应的data，并有属性，属性值
执行结果：
3.数据渲染
执行结果：
4.基本事件
在相应的js文件中写上相应的响应的事件效果：
4.1事件冒泡
点击蓝色view执行效果：
5.事件传参(data-)
6.单项数据流以及事件方式绑定
bindinput="bindDataHandler">
6.1抽象共同的事件处理函数
案例：使用input绑定的方式实现表单的提交
bindinput="inputChangeHandler" data-prop="username"/>
value="{{password}}" data-prop="password"
bindinput="inputChangeHandler">
js控制：
使用form表单的方式实现表单提交的登录
在js中获取值处理：
Page({
data: {
username: "",
password: ""
},
//用于处理表单提交事件
loginHandler: function (e) {
//1.先需要知道用户的输入值
()
//2.根据用户输入的值判断
//3.根据判断的结果做出响应
}
})
展示效果：
组件：
ss
3.表单组件
1)button按钮
2)checkbox复选框
checked="{{d}}"/>{{}} 相应的Js的代码 Page({ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' }, ] }, checkboxChange: function (e) { ('checkbox发生change事件，携带value值为：', ) } }) 3)picker选择器 注：时间选择器的mode="time"；日期选择器-> mode="date" custom-item="{{customItem}}"> 当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}} Page({ data: { region: ['江苏省', '苏州市', '吴中区'], customItem: '全部' }, bindRegionChange: function (e) { ('picker发送选择改变，携带值为', ) a({ region: }) } }) 4.操作反馈组件(最新api更改到api-界面-交互里) 4.1) tionSheet Page({ btnTodo:function(){ //交互操作组件 必须通过调用API的方式使用 tionSheet({ //显示出来的项目类表 itemList: ['江苏', '上海', '浙江'], success(res) { (ex) }, fail(res) { () } }) } }) 展示效果： 4.2) dal dal({ title: '提示', content: '这是一个模态弹窗', success(res) { if (m) { ('用户点击确定') } else if () { ('用户点击取消') } } }) 4.3)ast ast({ title: '成功', icon: 'success', //此处只支持"loading",或者"success" duration: 2000 }) 5.布局 伸缩布局(CSS3.0)重要的是flex flex有主轴和副轴,display：flex，默认是横轴为主轴:flex-direction:row(横轴是自左往右),也可使用flex-direction:column设置竖轴(方向是由上而下)为主轴 6.页面间的跳转 6.1)使用navigator标签 小程序区别于html的a标签，小程序中没有a标签，使用的是navigator替代html的a标签，navigator标签使用的是相对路径 6.2)页面间传值(类似于html的a标签使用get请求的方式在url中使用?以及&拼接参数及参数值) demo2页面获得参数是在js文件中的页面初始化函数onload(options)获得： 结果： 6.3）跳转页面无返回 在navigator标签内使用redirect属性即可达到跳转页面无返回的效果， redirector的默认值是true,所以属性值可加可不加 6.4)navigator点击效果 navigator默认点击高亮效果，可以自我设置效果展示，在wxss文件中对应的标签使用hover-class定义展示效果 tips:任意一个非navigator标签可以在标签的样式上使用cursor:pointer来定义展示点击高亮的效果，但此时的高亮效果只能是默认展示的效果，无法自定义! 6.5)可以使用事件结合api的方式实现页面的跳转 在js中：可以使用navigateTo(有返回)或者redirectTo(无返回实现跳转) Page({ goNextPage:function(){ //跳转页面 teTo({ url: '../demo2/demo2', }) //相当于navigator标签加上redirect // ctTo({ // url: '../demo2/demo2', // }) } }) 也可使用navigateBack实现返回的跳转方式： backHandler :function(){ // teBack({})//默认的是返回上一级页面 //指定delta就是返回指定层数(当前页面往回倒几层) teBack({ delta: 2 //当前页面往回倒2层 }) } tips： 1.若navigateBack函数中的delta指定的数太大(超出打开历史页面的记录数)的话会返回到打开的第一页 2.此时带参数与navigator传参一致使用?以及&在url中拼接 7.发送请求 注： 1.小程序开发区别于web，在web开发中可以使用ajax请求，小程序使用t的请求api，小程序没有跨域之说 2.小程序开发时使用异步请求t中的url，其中url必须满足必须在后台配置相关路径，必须是https协议，域名必须备案这三个条件；若实在不配置的话，可以忽略(只能在开发环境中，无法预览更别说生产) onLoad: function (options) { t({ //此处没有跨域的概念 url: '/v2/music/search?q=booty', header:{ 'Content-Type':'json' }, success: function(res){ (res) } }) //1.发送异步请求不再是web的ajax而是t //2.没有跨域 //3.请求的地址必须在管理后台添加白名单 //4.域名必须备案，服务端必须采用https },
版权声明：本文标题：微信小程序学习知识点 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1703156094h440253.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论