微信小程序知识总结

smile.1

已于 2022-11-10 23:40:19 修改

阅读量300

点赞数 3

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

于 2022-11-10 21:50:53 首次发布

本文链接：https://blog.csdn.net/weixin_48345246/article/details/127795761

版权

一、下载工具与注册账号

1.注册一个微信小程序

小程序

2.下载微信小程序开发工具

微信开发者工具下载地址与更新日志 | 微信开放文档

二、使用介绍

1.界面介绍

2.项目组成

3.page.json

三、内置组件

1.view组件块组件

2.text组件行内组件

3.button组件按钮

4.input组件表单

四、小程序模板语法

1.文本渲染

{{msg}} 或执行简单的js表达式

2.条件渲染

3.列表渲染与自定义渲染

4.导入

五、wxss

默认单位是rpx

750rpx等于一个屏幕的宽

六、事件

1.bindinput 表单输入时触发

2.bindconfirm 表单输入确认触发

3.bindtap 点击触发

4.事件传参

5.表单双向绑定

七、内置的api

1.显示提示 wx.showToast({})

2.本地存储 wx.setStorageSync(key,value)

3.本地取 wx.getStorageSync(key)

4.打开地图选择位置 wx.chooseLocation （{ }）

5.获取设备电量 wx.getBatteryInfoSync （{ }）

6.网络请求 wx.request（）

等等，更多可前往微信开放文档查看-> API | 微信开放文档

八、页面跳转

1.组件跳转

<navigator open-type="navigate"  url="跳转的地址">普通跳转</navigator>
<navigator open-type="redirect" url="跳转的地址">重定向</navigator>
<navigator open-type="reLaunch" url="跳转的地址">关闭所有页面，打开到应用内的某个页面</navigator>
<navigator open-type="navigateBack">返回</navigator>
<navigator open-type="switchTab" url="跳转的地址"跳转底部栏</navigator>

2.api跳转

wx.navigateTo 跳转
wx.switchTab 切换底部栏
wx.redirect 关闭所有页面，打开到应用内的某个页面
wx.reLaunch 重启

九、底部导航栏

在app.json中加入

  "tabBar": {
    "color": "#ccc",  //字体颜色
    "selectedColor": "#000", //选中时导航栏
    "borderStyle": "white", //边框颜色
    "backgroundColor": "#fff", //背景颜色
    "list": [
      {
        "pagePath": "pages/yidian/yidian",  //跳转路径
        "iconPath": "images/t1.png",  //未选中时图标
        "selectedIconPath": "images/t1-h.png",  //选中时的图标
        "text": "导航1" //图标下方文字
      },
      {
        "pagePath": "pages/todo/todo",
        "iconPath": "images/t2.png",
        "selectedIconPath": "images/t2-h.png",
        "text": "导航2"
      }
  },
//最少2个，最多5个

十、封装request

1. 定义baseURL

2. 添加请求头

3. 添加加载提示

4. 错误处理

// 基础的url
const URL = {
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
var  str = "";
for(var k in obj){
str+=k+"="+obj[k]+"&";
}
//移除最后一个&
return str.slice(0,-1);
}
function request(option){
var url = option.url;
// 01 可以添加baseURL
// 是不是以http开头的，是用url不是加上baseURL
url = url.startsWith("http")?url:URL.baseURL+url;
// 选项里面有params（get传入的参数）
if(option.params){
// 如果有参数，把参数转换为url编码形式加入
url+="?"+tansParams(option.params);
 }

// 02 可以添加请求头
var  header = option.header||{};
header.Authorization ="Bearer "+wx.getStorageSync('token');

// 03 可以添加加载提示
if(option.loading){
wx.showToast({
  title: option.loading.title,
  icon:option.loading.icon,
})
}
// 返回一个promise
return new Promise((resolve,reject)=>{
  wx.request({
    // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
    url: url,
    method:option.method||"GET",//请求的方法 默认get
    data:option.data, //post出入的参数
    header,
    success(res){
      // 请求成功
      resolve(res.data);
    },
    fail(err){
      // 04 对错误进行处理
      wx.showToast({title:"加载失败",icon:"none"})
      // 请求失败
      reject(err);
    },
    complete(){
      // 关闭加载提示
      wx.hideToast();
    }
  })
 })
} 
// 定义get简易方法
request.get= (url,config)=>{
 return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}