微信小程序知识点_微信小程序自定义遍历自定义 item index-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_69909373/article/details/127795090

微信小程序：小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用触手可及"的梦想，用户扫一扫或搜一下即可打开应用。
微信小程序创建：
1、下载一个微信开发者工具
2、在微信公众平台网站注册并登录，在里边申请为开发者（个人开发者-可选）
3、在登录成功，并且申请为开发者后，右上角点头像，在左侧侧边栏找到开发选项点进去开发管理，如下
在这里插入图片描述
4、点击开发设置，里边的开发者ID【AppID(小程序ID)】需要粘贴记住
5、在完成下载微信开发者工具后，点开创建项目
6、可自行设置项目名称，地址，在AppID里边放入上述需粘贴的ID号，后端服务以及模板选择可自行选择请添加图片描述
注：然后你的小程序就开始操作了

页面显示

注：在app.json里边谁在第一谁显示，例如现在显示的是index页面。
如下：
在这里插入图片描述

新建页面

在pages新建你一个文件夹，然后右键选择新建page页面，会生成四个不同的文件【建page页面时不用写后缀名，直接回车就行】
在这里插入图片描述

模板语法【类似vue写法但又不完全类似】

文本渲染

{{msg}} ---------文本渲染
{{1+1}}---------可以执行简单代码
{{msg.length}}----------可以计算长度

条件渲染

wx:if=“条件”
wx:elif=“条件” // 注意这里是elif
wx:else=“条件”

列表渲染【遍历】

wx:for=“{{list}}”
wx:key=“index”//与wx:for是配套使用
其中类似与vue遍历，里边有{{item}}是每一个本身
{{index}}是每一个是第几个【从0开始】

自定义列表渲染

定义item与index的名称
wx:for=“{{list}}}”
wx:for-item=“myitem”
wx:for-index=“myidx”
{{myidx}}
{{myitem}}

导入

import

只能导入template内容
template/utils.wxml

<template name="userCart">
  用户名：{{name}}
</template>

home.wxml

<import src="/template/utils.wxml">
<tempate is="userCart" data="{{...u1}}">

include

include

只能导入非template内容
template/foot.wxml

<view>{{内容}}</view>

home.wxml

<include src="/template/foot.wxml">

事件

bindInput
表单输入时【类似input】

bindconfirm
表单输入确认

bindtap
点击时候【类似click】

表单

//input表单
<input value="{{s1}}" bindinput="inputHd">
//input事件
inputHd(e){
   this.setData({s1:e.detail.value})
}
//获取的值需要这样写
表单的值获取：e.detail.value

页面跳转

利用组件跳转

url 跳转的地址

open-type 打开类型

navigate 普通跳转
navigateBack 返回
redirect 重定向
switchTab 跳转底部栏
relaunch 重启

页面传参

在传参时需要在函数里加一个形参e，然后在函数里写的时候要用e.target.dataset.msg
在data里定义与vue大致类似

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

tabBar

如果要使用底部导航切换页面的话需要用到tabBar
在app.json里边定义tabBar【在大括号里边写】

 "tabBar": {
        "font-size":"16rpx",//定义文字大小
        "color":"#ccc",//定义文字没被选中的颜色
        "selectedColor":"#000",//定义文字选中的颜色
        "list": [//如果需要更多可以自行添加下边的
          {
            "pagePath": "pages/vita/vita",//跳转的地址【注意不要在前边加./】
            "text": "基本信息",//定义这个页面所对应的文字
             "iconPath": "./img/11.png",//定义这个页面没被选中时所对应的图片
              "selectedIconPath": "./img/111.png"//定义这个页面被选中时所对应的图片
          },
          {
            "pagePath": "pages/experience/experience",
            "text": "工作经历",
            "iconPath": "./img/22.png",
            "selectedIconPath": "./img/222.png"
          },
          {
            "pagePath": "pages/skill/skill",
            "text": "职业技能",
            "iconPath": "./img/33.png",
            "selectedIconPath": "./img/333.png"
          },
          {
            "pagePath": "pages/profile/profile",
            "text": "爱好圈" ,
            "iconPath": "./img/66.png",
            "selectedIconPath": "./img/666.png"
          }
        ]
      }
}

封装request

为什么要封装

定义baseURL
添加请求头
添加加载提示
同一错误处理

首先在utils里建一个request.js

const URI = {
  baseURL: "地址"
}
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;
  url = url.startsWith("http") ? url : URI.baseURL + url;
  if (option.params) {
    url += "?" + tansParams(option.params);
  }
  var header = option.header || {};
  header.Authorization = "Bearer " + wx.getStorageSync('token');
  if (option.loading) {
    wx.showToast({
      title: option.loading.title,
      icon: option.loading.icon,
    })
  }
  return new Promise((resolve,reject)=>{
    wx.request({
      url: url,
      method:option.method||"GET",
      data:option.data,
      header,
      success(res){
        resolve(res.data);
      },
      fail(err){
        uni.showToast({title:"加载失败",icon:"none"})
        reject(err);
      },
      complete(){
        wx.hideToast();
      }
    })
  })
}
request.get=(url,config)=>{
  return request({url,method:"get",...config})
}
request.post=(url,data,config)=>{
  return request({url,method:"post",data,...config})
}
module.exports={request}//导出request

新建一个文件夹api文件里边创建一个api.js

const {request}=require("../utils/request")
function GetCategory(){
  return request.get("/mi/cats.php")
}
function GetNewsList(data){
  return request.get("/mi/list.php",{params:data})
}
function GetNewsContent(data){
  return request.get("/mi/content.php",{params:data,
  loading:{
    title:"内容准备中...",
    icon:"loading"
  }})
}
module.exports={
  GetCategory,GetNewsList,GetNewsContent
}

使用【引入api】

const {GetCategory, GetNewsList}=require("../../api/api.js");

使用【直接用request】

const {request} =require('../../utils/request.js')

   request.get("/mi/cats.php")
   .then(res=>{
       console.log(res);
     })
   .catch(err=>console. Error(err))

使用npm插件

使用vant weapp 链接https://youzan.github.io/vant-weapp/#/home
在cmd里边找到文件夹所然后用npm下载插件

npm i @vant/weapp -S --production

修改api.json

{
…
“setting”: {
…
“packNpmManually”: true,
“packNpmRelationList”: [
{
“packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./”
}
]
}
}

构建npm包
在菜单栏里边找到工具然后点击构建npm【等待下载安装完毕】
在这里插入图片描述
使用
只需要在app.json或index.json中配置

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>