微信小程序总结day01

最新推荐文章于 2024-09-15 22:49:43 发布

画饼糕手小北

最新推荐文章于 2024-09-15 22:49:43 发布

阅读量188

点赞数 8

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_63032193/article/details/141335054

版权

微信小程序

是一种新的开放能力，可以在微信内被便捷的获取和传播

优势：

易于推广
使用便捷
体验良好
成本低

劣势：

单板大小限制2M,采用分包最多30M(随官网)
部署上线麻烦
微信限制，积分，虚拟交易不能实现

书写

template

//声明
<template name=""></>
//使用
//在其他界面导入<import src="">
<template is="" data="传递的数据"></>
//除template模板以外的内容导入
<include src=''>

wxss

单位：1rpx = （屏幕宽度/750）px

在小程序中，样式引用是这样写：@import ‘./test_0.wxss’

程序和界面

//程序
App({
  onLaunch: function(options) {},//初始化数据，全局只调用一次
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

//界面
Page({
  data: { text: "This is page data." },
  onLoad: function(options) { },
  onReady: function() { },//页面渲染完成
  onShow: function() { },
  onHide: function() { },
  onUnload: function() { },
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

事件 bind:事件类型

在js中和data平级

传参：data-变量 = ‘传递的参数’，在事件里面有个事件对象event来接收参数

阻止事件冒泡：使用catch绑定

消息提示框

wx.showToast({
  title:'',
  icon:''
})
//模态对话框
wx.showModel({
  title:'',
  content:'',
  success:(res)=>{}
})

本地存储

//同步存储
setStorageSync(){
  wx.setStorageSync('key1',{age:18})
}
//取数据
getStorageSync(){
  wx,getStorageSync='key1'
}

//异步存储
Page({
  setStorage(){
    wx.setStorage({
      key:'key',
      data:{
        name:'ls'
      }
    })
  },
  getStorage(){
 		 wx.getStorage({
        key:'key',
      	success:(res)=>{
          cosnole.log(res.name)
        }
     })
	}
})

页面跳转

//只能跳转普通界面，保留当前 ，能传参
wx.navigateTo({
  url:'/pages/page/page'
})
//只能跳转tabbar界面，不能传参，想传用reLaunch
wx.switchTab({
  url:''
})
//跳后卸载当前界面，普通界面，能传参
wx.redirectTo({
  url:''
})
//跳转到任意界面，卸载所有界面，能传参
wx.reLaunch({
  url:''
})
//返回页面数，能传参
wx.navigateBack({
  delta:1
})
//标签跳转，能传参
<navigator url="" open-type="switchTab"></>
//传参

//接受参数,在生命周期中
  onLoad(options) {
//自带的options接收
  },