微信小程序总结

最新推荐文章于 2024-04-27 17:23:06 发布

xx080

最新推荐文章于 2024-04-27 17:23:06 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序总结文章标签：小程序

本文链接：https://blog.csdn.net/xx080/article/details/105294475

版权

微信小程序总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小程序总结

主要文件：

app.json：必须要有这个文件，如果没有降温u发运行，是配置文件入口和全局配置，包括网络设置、页面注册，以及window背景色、导航条样式、默认标题。
app.js：必须有，若没有就报错，主要用来以后可以在文件中监听小程序的生命周期，声明全局变量。

小程序的原理：

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
小程序分为两个部分webview和appService，webview主要展示UI，appService处理业务逻辑、数据及接口调用。通过系统层JSBridge实现通信，实现UI渲染、事件处理。

wxss和css的区别：

尺寸单位：rpx是响应式像素，可以根据屏幕的宽度进行相适应，规定屏幕宽度为750rpx。屏幕宽375px，等于有750个物理像素，750rpx=375px=750物理像素。
小程序传递数据的方法：
app.js里定义全局变量globalData，将需要存储的数据放在里面。使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在url里，在新页面onload的时候初始化，navigateto跳转页面时会保留当前页面，redirectto跳转时会关闭当前页面。onload只执行一次。

小程序的生命周期：

onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow() 页面显示/切入前台时触发
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide() 页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时
提高小程序应用速度的方法：
1、提高页面加载速度
2、用户行为预测
3、减少默认data大小
4、组件化方案

小程序数据请求封装(网络请求)：

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

微信小程序有点和缺点：

优点：
即用即走、无需安装、省流量、省安装时间、不占用桌面
依托微信流量，天生推广传播优势
开发成本比app低
缺点：
用户留存，即用即走是优势，也存在一些问题
入口相对传统app要深很多
限制较多，页面大小不能超过2MB，不能打开超过10个层级的页面
小程序关联微信公众号如何确定用户的唯一性：
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的

bindtap和catchtap的区别

(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。

(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

下拉刷新：

· 首先在全局 config 中的 window 配置 enablePullDownRefresh .
· 在 Page 中定义 onPullDownRefresh 钩子函数。到达下拉刷新条件后，该钩子函数执行，发起请求方法。
· 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新。
Config
在这里插入图片描述
page

bindtap和catchtap的区别是什么：

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

简述wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别：

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

伸缩布局

/* 主轴 */

.box {
    width: 400px;
    display: flex;
    border: 1px solid black;
    flex-direction: row;
    /* 环绕对其，之前之间之后都留有空白 */
    justify-content: space-around;
    /* 左对齐(起始位置) */
    justify-content: flex-start;
    /* 右对齐(末尾位置) */
    justify-content: flex-end;
    /* 水平居中对齐 */
    justify-content: center;
    /* 两端对齐 */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
/* 侧轴 */

.box2 {
    width: 500px;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    /* 顶部对齐 */
    align-items: flex-start;
    /* 底部对齐 */
    align-items: flex-end;
    /* 垂直居中对齐 */
    align-items: center;
    /* 垂直拉伸 */
    align-items: stretch;
}

小程序链接数据库

Page({
  data:{
    item:{}
  },
  onLoad: function (options) {
    var id = options.id;
    wx.request({
      url: 'http://api.cn/skys',//域名+方法
      header: {
        "Content-Type": "json"
      },
      dataType: "json",
      method: "get",
      success: (res) => {
        console.log(res.data);
        this.setData({
          item: res.data.data //将数据赋值给item
        })
      }
    })
  },
})

网页跳转

  show: function (event) {
    var id = event.target.dataset.id;
    //如果点击的内容id为4进行跳转
    if(id==4){
      wx.navigateTo({
        url: '/pages/zone/zone',
      })
    }
  }

//根据所传id进行跳转
  show: function (event) {
    var id = event.target.dataset.id;
    wx.navigateTo({
      url: '/pages/detail/detail?id='+id,
    })
  },

获取应用实例

const config = require("../../utils/config.js");

图标转换

WXML：

 <image style="width:60rpx; height:60rpx;" bindtap="collect" src="{{isCollect?'/Pages/img/02.png':'/Pages/img/01.png'}}"></image>

JS：

  collect:function(){
   this.setData({
     isCollect:!this.data.isCollect
   })
   this.showToast();
  },

提示框

 showToast:function(){
    if(this.data.isCollect){
      wx.showToast({
        title: '收藏成功',//提示文字
        icon: 'success',
        duration: 2000 //响应时间
      })
    }else{
      wx.showToast({
        title: '取消成功',
        icon:'success',
        diration:2000
      })
    }
  }

 onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '视频霍克',
      path: 'pages/index/index?id=1',  // 路径，传递参数到指定页面。
      imageUrl: '../img/3.jpg' // 分享的封面图
    }
  }

播放音乐

playMusic(event) {
    const music = wx.getBackgroundAudioManager();
    this.setData({
      isPlay: !this.data.isPlay
    })
    music.title = '关山酒'
    music.epname = '关山酒'
    music.singer = '等什么君'
    music.coverImgUrl = 'http://singerimg.kugou.com/uploadpic/pass/softhead/100/20200222/20200222180413435200.jpg'
    music.src = 'https://sharefs.yun.kugou.com/202003252023/6fc818587920cf86329c849828f40926/G164/M02/19/09/hJQEAF1ou5aAVrTxADlcwhIMwfQ617.mp3'
  }

连库

 onLoad:function(options){
    // console.log(common)
    var id=options.id;
    var article = {};
    this.data.currentId=id;
    wx.request({
      url: 'http://api.cn/article/'+id,
      header:{
        "Content-Type":"json"
      },
      dataType:"json",
      method:"get",
      success:(res)=>{
        console.log(res.data);
        this.setData({
          item:res.data.data
        })
      }
    })
      // var article={};
      // for(var i=0;i<common.data.length;i++){
      //  if(common.data[i].id==id){
      //    article=common.data[i]
      //  }
      // }
      // // console.log(article);
      // this.setData({
      //   item:article
      // })
      // console.log(article)
  },
 playMusic: function () {
    const music = wx.getBackgroundAudioManager();
    //  console.log(this.data.currentId);
    var currentMovie = common.data[this.data.currentId];
    this.setData({
      isPlay: !this.data.isPlay
    })
    if (this.data.isPlay) {
      // 播放音乐
      music.title = this.data.item.music.title;
      music.epname = this.data.item.music.epname;
      music.singer = this.data.item.music.singer;
      music.coverImgUrl = this.data.item.music.coverImgUrl;
      music.src = this.data.item.music.src;
    } else {
      //  暂停音乐
      music.pause();
    }
  },

传值

在这里插入图片描述
接收实例

const common=require('../data/info.js');

API接口

Page({
  data:{
    hots:{}
  },
  onLoad:function(){
    // var that=this;
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/in_theaters',//外链
      header:{
        "Content-Type":"json"
      },
      method:"GET",
      dataType:"json",
      success:(res)=>{
        // console.log(res)
        var arr=res.data.subjects;
        for(var i=0;i<arr.length;i++){
          arr[i].title=arr[i].title.slice(0,7)
        };
        this.setData({
          hots:arr
        })
      }
    })
  }
})

底部导航

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/static/image/shouye.png",
        "selectedIconPath": "pages/static/image/shouye1.png"
      },
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "pages/static/image/dianying.png",
        "selectedIconPath": "pages/static/image/dianying1.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "详情",
        "iconPath": "pages/static/image/xiangqing.png",
        "selectedIconPath": "pages/static/image/xiangqing1.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "我的",
        "iconPath": "pages/static/image/wode.png",
        "selectedIconPath": "pages/static/image/wode1.png"
      }
    ]
  }

xx080

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序总结

小程序总结主要文件：app.json：必须要有这个文件，如果没有降温u发运行，是配置文件入口和全局配置，包括网络设置、页面注册，以及window背景色、导航条样式、默认标题。app.js：必须有，若没有就报错，主要用来以后可以在文件中监听小程序的生命周期，声明全局变量。小程序的原理：微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的...
复制链接

扫一扫