|
一、准备工作-相关资料
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; /*设置多行的行数*/
|