小程序开发

✅ 页面配置

// window:
navigationBarBackgroundColor  导航栏背景颜色
navigationBarTextStyle  导航栏标题颜色，仅支持 black / white
navigationBarTitleText  导航栏标题文字内容
navigationStyle    default默认样式  custom只保留右上角胶囊按钮
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh  是否开启全局的下拉刷新

// tabBar:
color 字体颜色
selectedColor 文字选中时的颜色
position 位置，仅支持 bottom / top
list 分栏——数组
pagePath 页面路径（pages/）
text 按钮上文字
iconPath 图片路径限制为 40kb，建议尺寸为 81px * 81px
selectedIconPath 选中时的图片路径

// 设置单页面顶部标题：
json文件加入："navigationBarTitleText": "页面标题"

🌈 基础语法

// 事件：
bind:tap="XXX"
//函数内设置可同步数据到data
this.setData({       }) 
// 获取data里面定义的内容
this.xxx
// 获取{{ xxx }}的内容
this.data.xxx 
// 获取点击事件里面的值
data-id="vlaue" 
// 定时器
setTimeout  执行一次定时器
clearTimeout  取消
setInterval  执行n次定时器
clearInterval  取消

onLoad(){
    setTimeout(this.Timeout,3000)
  },
  Timeout(){
    console.log("成功！")
  }

🎯 组件封装

json.js 设置"component": true

<button>{{title}}</button>
Component({  
  properties: {  
    title: {  
      type: String,  
      value: '默认标题'  
    }  
  } 
})

"usingComponents": {
    "buttonList": "/component/button/button" 
  }

<buttonList title="我的自定义组件"></buttonList>

🔄 封装请求

module.exports = function (path, data, method) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: path,
            method: method,
            data: data,
            header: {
                // 请求头
            },
            success: res => {
                // 响应前判断
            }
        })
    })
}
// 不带参数
fetch('/food/index').then(data => {
  
}
// 带参数
fetch('/food/order', {
      id: //数据
    }, 'POST').then(data => {
      //响应
    }

🎉 生命周期

onLoad: function() {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
onShareAppMessage(){
    //转发
return {
title	转发标题
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径	
imageUrl  显示图片
}
}

⚙️ API

// 回调函数：
success成功、fail失败、complete都会调回

// 判断是否开启定位
const systemSetting = wx.getSystemSetting()
console.log(systemSetting.locationEnabled)
// 监听页面前台和后台
 onLoad() {
    wx.onAppHide(() => {
      console.log('页面从前台变为后台')
    })
    wx.onAppShow(() => {
      console.log('页面从后台切换到前台')
    })
  }
// 路由
wx.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo	保留当前页面，跳转到应用内的某个页面
// 交互
● wx.showToast（消息提示框）
title内容
icon图标success成功、error失败、loading加载、none不显示
duration延迟时间
mask是否显示透明蒙层，防止触摸穿透
● wx.showModal（对话框）
title标题
content内容
confirm为 true 时表示用户点击了确定按钮、cancel为 true 时，表示用户点击了取消
● wx.showLoading（加载框）
title内容
mask是否显示透明蒙层，防止触摸穿透
wx.hideLoading()——关闭加载框
● wx.showActionSheet（菜单选择器）
itemList数组选择内容
tapIndex选中第几个
// 滚动
wx.pageScrollTo（将页面滚动到目标位置）        
scrollTop目标位置单位 px
duration时长
Tab Bar
● wx.showTabBarRedDot——显示 tabBar某一项的右上角的红点
index值
● wx.hideTabBarRedDot——隐藏 tabBar 某一项的右上角的红点
● wx.setTabBarBadge——为 tabBar 某一项的右上角添加文本
index值
text内容
● wx.removeTabBarBadge——移除 tabBar 某一项右上角的文本
index值
// 网络
wx.request发起请求
url链接地址
data发送的值
header头部
timeout超时时间
method请求方法
// 下载
const DownloadTask = wx.downloadFile下载文件到临时文件夹
url:值
  DownloadTask.onProgressUpdate(function (e) {  //监听下载进度
      console.log(e.progress)  // 下载进度
      console.log(e.totalBytesWritten)  // 已下载的文件大小
      console.log(e.totalBytesExpectedToWrite) //预计总文件大小
    })
// 上传
wx.uploadFile上传文件到服务器
url:值
filePath本地文件地址
name文件key名字
formData请求的值
header头部
// 监听下载进度和下载的方法一样
// 存储
● wx.setStorage本地存储
key:"key",
data:"value"
● wx.getStorage获取缓存
key:"key"
● wx.removeStorage删除本地指定缓存值       
key:"key"
● wx.clearStorage清空本地缓存值
// 图片
● wx.saveImageToPhotosAlbum保存图片到本地
● wx.saveVideoToPhotosAlbum保存视频到本地
filePath图片临时路径
● wx.chooseMedia选择图片或视频
count可选数量(默认9) 
mediaType文件类型(默认image/video)
sourceType选择的来源(默认album相册/camera使用相机拍摄)
maxDuration视频时间3s 至 60s(默认10s)
// 音乐播放器
const innerAudioContext = wx.createInnerAudioContext()          //初始化
innerAudioContext.src = '地址'
innerAudioContext.play() // 播放          //用事件调用
innerAudioContext.pause() // 暂停
innerAudioContext.stop() // 停止
// 其它
● wx.setClipboardData复制到剪切板
data内容
● wx.getClipboardData获取剪切板内容
● wx.scanCode调起客户端扫码界面进行扫码
onlyFromCamera是否只能从相机扫码
result扫码的内容
● wx.sendSms拉起手机发送短信界面
phoneNumber预留手机号
content预留发送内容
● wx.vibrateLong长时间震动(400ms)
● wx.vibrateShort短时间震动(15ms) 
type震动强度类型(必填)，有效值为：heavy、medium、light

💡 云开发

// 配置环境
1. project.config.json文件下添加：  "cloudfunctionRoot": "zhangCode/",
2. 新建根目录zhangCode，右键新建node.js云函数
3. app.js文件添加环境
wx.cloud.init({
      env: 'cloud1-7ga4gxn064daceb2',
      traceUser: true,
    })

小程序开发 ​

✅ 页面配置 ​

🌈 基础语法 ​

🎯 组件封装 ​

🔄 封装请求 ​

🎉 生命周期 ​

⚙️ API ​

💡 云开发 ​

小程序开发

✅ 页面配置

🌈 基础语法

🎯 组件封装

🔄 封装请求

🎉 生命周期

⚙️ API

💡 云开发