小程序入门学习-优快云博客

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