zoukankan      html  css  js  c++  java
  • 小程序

     入门 qqq   m18303051935@163.com  qqqqqq

    WePY腾讯团队推出的小程序组件化开发框架

    mpvue框架

    微信开发者工具:

    其中app.js/app.json/app.wxss是必不可少的,是小程序生成的依赖文件

    app.js监听并控制整个程序的生命周期,也是全局变量声明的地方,

    apx是尺寸单位,跟px类似。

    rem:规定屏幕宽度为20rem;

    1rem=(750/20)rpx

    <view></view>可看做为<div></div>

    index.js文件

    getApp():获取应用实例,

    Page:声明页面

    data:定义数据

    bingViewTap:为在view中绑定的是tap事件定义操作方法

    wx.navigateTo:导航到响应页面

    onLoad:定义页面加载事件

    快捷键:

    +p 跳转文件

    +e 最近文件

    app.json

    Pages   页面

    Windows 设置导航条、状态栏、标题、窗口背景色

    navigationBarBackgroundColor: 背景色

    navigationBarTitleText: 标题

    navigationBarTextStylke 标题颜色:只能白色和黑色

    navigationStyle: 自定义导航条:default/custom

    backgroundTextStyle:dark/light  下拉loading样式

    backgroundColor: 背景色、需下拉刷新

    enablePullDownRefresh:true 下拉刷新

    tabBar  选项卡

    wxml 骨架/页面:内置组件

    组件两大类:

    内置组件如、view,image

    自定义组件、epsoide-cmp,like-cmp,img-btn-cmp,movie-cmp

    代码规范:驼峰

    flex布局

    块级元素都是独占一行、如同div

    .chunk{

       /* 行内元素 */

       /* display: inline-block; */

       100px;

       height:100px;

    }

    /* flex flexible box 弹性盒子 */

    /* flex container 弹性容器

      flex item    弹性容器子元素 */

    .containe{ //把r去掉了。因不起作用

      display: flex;

      /* row column row-reverse column-reverse */

      flex-direction: row;

      height: 200px;

      /* justify-content对齐方向 flex-start flex-end center space-between space-around 家思踢fi康疼他*/

      justify-content:center;

      /* 主轴justify-content和交叉轴align-items 啊立体爱他姆斯*/

      align-items:baseline;

      /* 屏幕宽度450px */

      flex-wrap:wrap;

    }

    组件开发:创建组件-定义组件-引入组件

    相对路径和绝对路径

    flex rpx自适应

    只有很少的全局样式,才能被组件继承

    pages下页面是可以继承全局样式

    组件最好不要留有空白间距

    组件自适应宽度

    组件事件:点击bing:tap="onLike",js中写

    bind不会阻止冒泡事件向上冒泡,catch会阻止冒泡事件向上冒泡

    数据来源的三种路径:wxml,js,服务器、js

    数据绑定

    三元表达式与图片切换

    data可以{{}}显示,properties属性也可以{{}}:涉及到数据的封闭性和开放性:图片封闭,数字开放.

    let含块级作用域、而var不是

    调用RestAPI拿数据

    pages->xxx.js:页面的声明周期函数

    200 请求成功

    201 创建成功

    202 更新成功

    204 删除成功

    301 永久重定向

    400 请求包含不支持参数

    401 未授权

    403 被禁止访问

    404 请求资源不存在

    413 上传的File体积太大

    500 (服务)内部错误

    wx.request(传Object):小程序只有异步加载,不可设置同步

    url 开发者服务器地址

    data 请求的参数

    header 设置请求的header,header中不能设置Referer

    method (需大写)OPTIONS/TRACE/CONNECT/GET/PUT/POST/DELETE

    dataType 如果设为json,会对返回的数据做一次JSON.parse

    responseType 设置响应的数据类型,合法值:text,arraybuffer

    success  收到开发者服务成功的回调函数

    fail  接口调用失败的回调函数

    complete 接口调用结束的回调函数(成功或失败都会执行)

    (项目设置大√设置不效验)上线后还是,必须在后台账号中添加小程序访问的域名

    请求没添加Appkey,

    funtion(){}和箭头函数的区别:箭头函数不会影响this传值、而 function(){}会影响

    Promise解决的问题:异步嵌套、可以让我们使用return (点击事件切换心形、获取数据、config.js、http.js)(config->http.js->pages->xxx.js)

    import和export只能用相对路径,而组件两者都支持

    res.statusCode.toString()

    9-6

    models中继承了http->pages-xxx.js

    /*app.js注意:有时新增组件或文件夹是这边会多出,有影响*/  

    谈论梦想的人很多,可为此默默付出的却是少数

    attached:function(){}//声明周期函数

    observer:function(){}//改变属性值时会触发

    不要在observer中修改自身属性,在data中定义,!wxs是最适合的解决方式

    组件里边css不允许使用#id选择器

    小程序中继承组件机制:Behavior组件(属性或数据或方法)共用(复用js),//多继承,继承时子组件会覆盖父,(多个子继承时,选最后一个子覆盖父)

    let classicBeh = Behavior({

    属性

    数据

    方法

    声明周期函数

    ...都有

    })

    export {classicBeh}

    wx.setStorageSync("key","value")存入缓存

    wx.getStorageSync()读取缓存

    哪些内容是可以缓存的,哪些不应该缓存

    单独获取点赞信息

    1.console.log('${a}456')//模板字符串

      //classic:res

    2....res//扩展运算符

    小程序中条件渲染是用在wxml,并不是用在js中

    wx:if="{{}}" 

    hidden="{{}}"//标签的显示隐藏,默认自定义组件不起作用,需设置!

    wxss=>@import="../common.wxss";共用(复用css)

    wxml=>template模板  共用(复用html)

    新版API,背景音频播放管理

    wx.getBackgroundAudioManager()

    属性

    paused 播放状态

    src 控制音乐播放,默认是空字符串,设置新src时会自动播放,

    title 标题

    方法 

    play 播放

    pause 暂停

    stop 停止

    事件监听函数

    onPlay 背景音频播放事件

    onPause 背景音频暂停事件

    onStop  背景音频停止事件

    onEnded 背景音频自然播放结束事件

    父子组件的通信,

    1.wxml数据绑定:父组件向子组件的指定属性设置数据,

    2.事件:子组件向父组件传递数据

    组件与组件的通信

    虽不能直接传递数据

    能间接的传递数据,用pages作为父组件转发,在通过绑定到子组件

    切换时,组件隐藏时暂停音乐。 

    hidden不会触发组件的detached//声明周期函数:切换时触发

    wx:if和hidden的区别

    hidden:只是简单的显示和隐藏。

    wx:if:(切换)渲染条件时会执行完整声明周期

    557581284纸短情长

    287018 开始懂了

    421423198谎话情歌

    like.js=>like.wxml pages index.js=>index.wxml

    http://music.163.com/song/media/outer/url?id=287018.mp3爬取歌曲

    小程序要求上线时:服务器端提供的API都是Https的接口

    加入缓存后对点赞心有影响,解决思路,哪些应该缓存

    models->like.js/pages/index.js/index.wxml改过,未成功,注释了

    -----

    promise优点:多个异步等待合并

    wx.getSystemInfo()//获取系统信息

    promise.then()调用成功或失败的结果

    request({url,data={},method='GET'})//解构

    wx:key="id"

    wx.navigateTo()//跳转页面 到书籍详情页

    <slot>插槽:使组件更灵活,如tag中的标签/和搜索标签使可已体现出来。如果是空的不显示,

    和属性properties相似:从外部向组件传递数据或标签

    wxs:让wxml具备调用js

     
  • 相关阅读:
    Flutter | 如何优雅的解决依赖版本冲突
    Flutter包依赖冲突解决方法
    Cannot run with sound null safety because dependencies don't support null safety
    软件工程实践2019第三次作业
    【题解】洛谷 P3704 [SDOI2017]数字表格
    关于学历和素质成正比的隐晦思考
    斐波那契数列通项公式
    某不知名比赛游记
    CCPC-final 2020 北京游记
    EC-final 2020-2021 西安游记
  • 原文地址:https://www.cnblogs.com/Bkxk/p/9791229.html
Copyright © 2011-2022 走看看