一、准备工作-相关资料
1.官网:https://mp.weixin.qq.com/
2.微信开发工具下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315
3.开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
4.小程序文件:
-1.全局配置:app.json—官网—指南—配置小程序—全局配置
作用:对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
-2.页面配置:页面名称.json—官网—指南—配置小程序–页面配置
作用:对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
-3.sitemap配置:sitemap.json
作用:用于为被微信搜索爬取页面
-4.项目描述:project.config.json
这里面的描述,一般不要去修改,可在小程序右上角的详情—本地设置中区设置
-5.app.js:App({…}) , 页面.js:Page({…})
“navigationBarBackgroundColor”: “#f0f”,
“navigationBarTitleText”: “标题文字”,
“navigationBarTextStyle”: “black”
组件: view 视图容器 text 文本
相关面试题:
1.小程序有几个文件?分别是什么定义
WXML:微信自己定义的一套组件
WXSS: 用于描述 WXML 的组件样式
js : 逻辑处理
json: 小程序页面配置
2.小程序 WXSS 与 CSS 的区别
1.wxss 背景图片只能引入外链,不能使用本地图片
2.小程序样式使用 @import 引入 外联样式文件,地址为相对路径。
3.尺寸单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进行自适应。
二、事件,路由,生命周期
1、事件的两种绑定方式:
-1.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
-2.非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
绑定方式:
bind:不会阻止冒泡事件向上冒泡,冒泡事件
catch:阻止冒泡事件向上冒泡,非冒泡事件
bindtap=‘事件名’ catchtap=‘事件名’。 大多使用catchtap
事件流的三个阶段:1.捕获 2.执行 3.冒泡
捕获:从外向内 冒泡 从内向外
捕获:从祖先元素一直到子元素捕获事件,捕获之后就执行这个事件了,执行完事件后就冒泡祖先元素的身上,继而去触发他们身上的事件
2、路由
保留当前页面,跳转应用内的某个页面
wx.navigateTo({
url:'/pages/logs/log'
})
关闭所有页面,跳转应用内的某个页面
wx.reLaunch({
url: '/pages/logs/log',
})
关闭当前页面,跳转应用内的某个页面
wx.redirectTo({
url: '/pages/logs/log',
})
关闭当前页面,返回上一页面或多级页面
wx.navigateBack({
delta: 2,
})
3、生命周期
onLoad首先触发,之后onShow,onReady,路由跳转后上一个页面不存在了触发onHide,之后onUnload
监听页面加载 onLoad
onLoad: function (options) {
console.log('监听页面加载')
},
监听页面初次渲染完成 onReady
onReady: function () {
console.log('监听页面初次渲染完成')
},
监听页面显示 onShow
onShow: function () {
console.log('监听页面显示')
},
监听页面隐藏 onHide
onHide: function () {
console.log('监听页面隐藏')
},
监听页面卸载 onUnload
onUnload: function () {
console.log('监听页面卸载')
},
三、常用的一些方法
获取用户信息:wx:getUserProfile
必填:desc:'展示', //用来说明获取用户信息的用途
ajax请求
wx.request({
//注释 ttp://localhost:3000/banner 协议 域名 端口/端口地址
url:'http://localhost:3000/banner',
data:{type:0},
method:'GET',
success:((res)=>{
console.log('请求成功',res)
let banner = res.data.banners
this.setData({
banner
})
}),
fail:((err)=>{
console.log('请求失败',err)
})
})
this.setData修改data中自己定义的值
wx:for='{{}}' wx:key=''
循环后直接 item.值 就可以循环出来了
wx:if=“{{ 判断 }}” wx:else 就可以控制组件显示与隐藏
/* 多行文本溢出隐藏 省略号代替 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /*依赖webkit内核*/
-webkit-box-orient: vertical; /*对齐模式*/
-webkit-line-clamp: 2; /*设置多行的行数*/