小程序入门学习

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值