微信小程序学习笔记

最新推荐文章于 2024-11-02 20:12:59 发布

空盒儿

最新推荐文章于 2024-11-02 20:12:59 发布

阅读量231

点赞数

分类专栏：微信小程序文章标签：小程序 javascript node.js

本文链接：https://blog.csdn.net/qq_39693281/article/details/106989574

版权

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

1 篇文章 0 订阅

订阅专栏

前言

之前在工作之余学习了微信小程序，想着学会了可以自己设计一个小程序，学完基础之后，笔记记在了有道云笔记里，但后来因为种种原因，将此事抛在了脑后，今天又突然想起此事，故将笔记移到了这里，以供后续学习。

01 目录结构

项目目录结：
在这里插入图片描述
页面：

整个小程序的配置文件,如果有公共的样式可以放到app.wxss中(优先级:就近原则)：

在这里插入图片描述
app.json：

02 view

新建一个首页
在这里插入图片描述
点击效果：

hover-stay-time=“100”: 点击保留时间时间

<view hover-class="hover-class-style" hover-stay-time="100">
  带有点击效果:hover-class-style
</view>

导入外部样式：

wxss:
    @import '../../style/base.wxss';

支持的选择器：

.class    #id    element      element,element    ::after     ::before

FlexBox布局：

弹性盒子模型(The Flexible Box
Module),意为弹性布局,通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性.

03 text

创建一个文本：

<text>我是第一个文本\n</text>

数据绑定：

wxml:
    <text>{{text2}}\n</text>
    
js:
   data: {
    text2:"我是第2个文本"
  },

指令: wx:if：

wxml:
<text wx:if="{{length>0}}">我是第三个文本:length大于0\n</text>
<text wx:if="{{length==0}}">我是第四个文本:length等于0\n</text>
<text wx:if="{{length<0}}">我是第五个文本:length小于0\n</text>

js:
    data: {
    length:0
  },

04 image

创建image目录：
在这里插入图片描述

导入图片:右键–>硬盘打开–>将图片粘贴进文件夹
image组件默认宽度300px、高度225px

加载项目中的图片：

<image src="../../image/pic1.jpg"  mode="aspectFill"></image>

加载网络中的图片：

<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575886313453&di=444c56393bc81bdf949e28c58486f36f&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F7c1ed21b0ef41bd5541a016751da81cb38db3ddc.jpg"></image>

图片的缩放和裁剪：

缩放	scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	裁剪模式，不缩放图片，只显示图片的顶部区域
裁剪	bottom	裁剪模式，不缩放图片，只显示图片的底部区域
裁剪	center	裁剪模式，不缩放图片，只显示图片的中间区域
裁剪	left	裁剪模式，不缩放图片，只显示图片的左边区域
裁剪	right	裁剪模式，不缩放图片，只显示图片的右边区域
裁剪	top left	裁剪模式，不缩放图片，只显示图片的左上边区域
裁剪	top right	裁剪模式，不缩放图片，只显示图片的右上边区域
裁剪	bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
裁剪	bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

05 携程案例

flexbox布局：

wxss:
    display:flex;//指定布局为flexbox布局
    flex-direction:row;//水平
    flex-direction:column;//垂直

小程序中JSON文件是一些配置文件不能放JSON数据,JSON数据放到js中的Data内

wx:for(列表渲染)：

/*
    wx:for="" : 要循环的数组
    wx:key="" : 索引
    wx:for-item="item" : 定义每个元素的变量(默认是item)
    wx:for-index="index" : 定义元素的索引(默认是index)
*/
<block wx:for="{{itemBeans}}" wx:key="{{index}}"  wx:for-item="item">
      //循环的内容
      {{item.title}}
      {{item.items[2].title}}
</block>

06 input

原生组件：

camera canvas input live-player live-pusher map textarea video

使用限制：

脱离WebView渲染流程外
原生组件成绩最高,页面中其他组件设置z-index无法盖住原生组件
原生组件无法在<pick-view>中使用
基础库2.4.4以下版本,原生组件不支持在<scroll-view>、<swiper>、<movable-view>中使用
部分CSS无法应用于原生组件:
- 无法对原生组件设置CSS动画
- 无法为原生组件定义position:fixed;
- 不能再父级节点使用overflow:hidden;来裁剪原生组件的显示区域

input常见属性:

value : 值
type : 类型
password : 是否为密码
placeholder : 占位符
placeholder-style : 占位符样式
placeholder-clss : 占位符名称
maxlength : 最大字符长度
bindinput : 键盘输入事件

双向绑定：

WXML:
    <input bindinput="bindinput" />
    <text>{{value}}</text>

JS:
    Page({
        data:{
            value:''
        },
        bindinput:function(event){
            console.log(event.detail.value);
            setData({
                value:event.detail.value
            })
        }
    })

07 button

button常见属性：

size：字体大小
type：按钮类型
plain：是否镂空
disabled：是否禁用
loading：加载状态
微信开放能力 open-type：
- contact:客服
- getUserInfo：获取用户信息
- openSetting：授权
- teedback：意见反馈

08 login

渐变背景色：

background: linear-gradient(0deg,#395ecb 0%,#3657be 35%,#242161 80%,#1a0531 100%);

form表单步骤：

在form中添加属性bindsubmit
在form表单中按钮添加form-type=“submit”
在input中添加name属性

<form bindsubmit="onbindsubmit">
    <!-- 用户名和密码 -->
    <view class="user-pass">
      <!-- 用户名 -->
      <view class="user">
      <input placeholder="请输入用户名" placeholder-class="user-plackholder-class"
       name="username"></input>
      <image src="../../image/logo.png"></image>
      </view>
      <!-- 密码 -->
      <view class="user">
      <input placeholder="请输入密码" placeholder-class="user-plackholder-class" password 
       name="password"></input>
      <image src="../../image/logo.png"></image>
      </view>
      <!-- 登录 -->
      <button class="btn-login" size="mini" hover-class="hover-class-style"
        form-type="submit">登录</button>
      <!-- 注册 -->
      <text class="btn-reg">注册</text>
    </view>
  </form>

JS:
  // 当用户提交表单的时候会回调这个函数
  onbindsubmit:function(event){
    console.log(event.detail);
  },

09 scroll-view

垂直滚动：

给scroll-view添加scroll-y="{{true}}"
给scroll-view设计高度

WXML:
    <scroll-view scroll-y class="scroll-view-y">
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
    </scroll-view>

WXSS:
    .scroll-view-y{
      height: 300rpx;
      background: skyblue;
    }
    .scroll-view-y view{
      height: 300rpx;
      border-bottom: 1rpx solid gray;
    }

水平滚动：

给scroll-view添加scroll-x="{{true}}"属性
给scroll-view添加高度，并添加white-space="nowrap"来强制scroll-view内容要在一行（默认内容抵达边界会换行）
指定scroll-view里面的组件类型为inline-block

WXML:
    <scroll-view scroll-x  class="scroll-view-x">
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
      <view>item1</view>
    </scroll-view>

WXSS:
    .scroll-view-x{
      height: 300rpx;
      background: lightpink;
      white-space: nowrap;
    }
    .scroll-view-x view{
      display: inline-block;
      width: 200rpx;
      height: 100%;
      border: 1px solid gray;
    }

10 swiper滑块视图容器&tabBar底部导航

滑块视图容器：

WXML:
    <swiper indicator-dots="{{indicator_dots}}" autoplay="{{autoplay}}" interval="{{interval}}"
     circular="{{circular}}">
      <swiper-item wx:for="{{itemsData}}" wx:key="{{index}}" >
        <image src="{{item.image}}"></image>
      </swiper-item>
    </swiper>

常用属性：

indicator-dots : 显示面板指示点
autoplay : 自动切换
current : 当前滑块的索引
interval : 自动切换时间间隔
duration : 滑动动画时长
circular : 衔接滑动
vertical : 纵向
easing-function : 切换动画类型

tabBar底部导航：

app.json
"tabBar": {
    "color":"#DBDBDB",
    "selectedColor":"#7E7E7E",
    "backgroundColor":"#FAFAFA",
    "list": [{
      "pagePath": "pages/11-HomeBusiness-index/11-HomeBusiness-index",
      "text": "首页",
      "iconPath": "/image/logo.png",
      "selectedIconPath": "/image/logo_s.png"
    },
    {
      "pagePath": "pages/11-HomeBusiness-cart/11-HomeBusiness-cart",
      "text": "购物车",
      "iconPath": "/image/logo.png",
      "selectedIconPath": "/image/logo_s.png"
    },
    {
      "pagePath": "pages/11-HomeBusiness-user/11-HomeBusiness-user",
      "text": "我的",
      "iconPath": "/image/logo.png",
      "selectedIconPath": "/image/logo_s.png"
    }]
  },

11模块化与过滤器&导航

保留两位小数：

WXS:
    var filters = {
      toFix: function (val, count) {
        return val.toFixed(count);//保留两位小数
      }
    }
    module.exports = { //module.exports:模块对外暴露其内部的私有变量与函数
      toFix: filters.toFix
    }

WXML:
    <wxs module="filters" src="11-HomeBusiness-index.wxs"></wxs>
    {{filters.toFix(item.proPrice,2)}}

导航：

button绑定事件跳转页面

WXML:
    <button type="primary" bindtap="to04_xCheng">跳转</button>

JS:
    to04_xCheng:function(){
        wx.navigateTo({
          url: "/pages/04-xcheng/04-xcheng",
        })
      }

使用navigator标签

WXML:
    <navigator url="/pages/07-login/07-login">
      <button type="warn">跳转</button>
    </navigator>

12 云开发

后台：cloudfunctions
前台：miniprogram
调用数据库：

JS:
onLoad:function(options){
    //调用默认环境的数据库引用
    const db = wx.cloud.database();
    const banner = db.collection('tables');
    //请求后台
    // banner.get({
    //   success(res){
    //     console.log(res);
    //   },fail(err){
    //     console.log(err)
    //   }
    // })
    /*promise用法 */
    banner.get().then(res=>{
      console.log(res);
      this.setData({
        banner:res.data
      })
    })
    .catch(err=>{
      console.log(err);
    })
  }

查询数据：

JS:
onLoad: function (options) {
    //调用环境数据库
    const db = wx.cloud.database()
    const banner = db.collection('tables')
    //查询
    banner.where({ //要查询的条件
      name:'战狼'
    })
    .get() //获得请求
    .then(res=>{ //请求成功
      console.log(res);
    })
    .catch(err=>{ //请求失败
      console.log(err)
    })
  }

插入数据：

JS:
onLoad: function (options) {
    //调用环境数据库的引用
    const db = wx.cloud.database()
    const banner = db.collection('tables')
    //添加数据
    banner.add({
      data:{
        add_time:"2018-05-19",
        id:3,
        image:'http://',
        index:3,
        name:"赌神"
      }
    })
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err)
    })
  }

更新数据：

JS:
局部更新:
    //局部更新数据
    //指定是哪个_id
    banner.doc('789').update({ //只能更新一个
       data:{ //要更新的字段
         name:'西游记'
       }
     })
     .then(res=>{
       console.log(res);
     })
     .catch(err=>{
       console.log(err);
     })
全局更新:
    //全局更新一条数据
    banner.doc('789').set({
      data:{
        add_time:"3000",
        id:9,
        image:'taobao.com',
        index:10,
        name:'张家辉'
      }
    })
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err);
    })

删除数据：

JS:
banner.doc('789').remove({})
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err);
    })

提交表单：

WXML
<form bindsubmit="bindFormsubmit">
  <input type="text" placeholder="请输入你的姓名" bindinput="nameinput"></input>
  <input type="number" placeholder="请输入你的年龄" bindinput="ageinput"></input>
  <text>性别</text>
  <radio-group bindchange="radiochange">
    <label wx:for="{{items}}">
      <radio value="{{item.value}}" checked="{{item.checked}}"></radio>
      {{item.value}}
    </label>
  </radio-group>
<button form-type="submit" type="primary" >提交</button>
</form>

JS
data: {
    name:'',
    age:'',
    sex:'',
    items:[
      {value:'男'},
      {value:'女',checked:'true'}
    ]
  },
  //取姓名
  nameinput:function(e){
      this.setData({
        name:e.detail.value
      })
  },
  //取年龄
  ageinput:function(e){
    this.setData({
      age:e.detail.value
    })
  },
  //取性别
  radiochange:function(e){
    this.setData({
      sex:e.detail.value
    })
  },
  //表单提交
  bindFormsubmit:function(){
    const db = wx.cloud.database();
    const user = db.collection("user");
    user.add({
      data:{
        name:this.data.name,
        age:this.data.age,
        sex:this.data.sex
      }
    })
    .then(res=>{
      console.log(res)
      wx.showToast({ //弹框
        title: '提交成功',
        duration:2000 //两秒后消失
      })
    })
    .catch(err=>{
      console.log(err)
    })
  },

上传文件到云存储：

JS
btnImage:function(){
    wx.chooseImage({
      count:1, //选择图片数量
      sizeType:['original','compressed'],  //图片尺寸类型  original:原图   compressed:压缩图
      sourceType:['album','camera'], //图片来源  album:相册   camera:照相机
      success:(res)=>{
        console.log(res)
        wx.cloud.uploadFile({ //上传文件
          //文件的存储位置  目录名/文件名.后缀名
          cloudPath:'climg1/other.jpg',
          filePath:res.tempFilePaths[0],
          success:(res)=>{
            console.log(res)
          },
          fail:(err)=>{
            console.log(err)
          }
        })
      },
      fail:(err)=>{
        console.log(err)
      }
    })
  },

下载文件：

JS
 btnImage:function(){
    wx.cloud.downloadFile({
      fileID:'cloud://test-jlxkz.7465-test-jlxkz-1301010086/climg1/other.jpg',
      success:(res)=>{
        console.log(res)
      },
      fail:(err)=>{
        console.log(err)
      }
    })
  },

删除文件：

JS
btnImage:function(){
    wx.cloud.deleteFile({
      fileList: [
        'cloud://test-jlxkz.7465-test-jlxkz-1301010086/climg1/other',
        'cloud://test-jlxkz.7465-test-jlxkz-1301010086/climg1/other.jpg',
      ],
      success:(res)=>{
        console.log(res)
      },
      fail:(err)=>{
        console.log(err)
      }
    })
  },

13 云函数

需要安装NodeJS,官网下载（自带npm）
新建Node.js云函数，右键打开终端，执行npm install --save会出现package-lock.json
第一个云函数：

index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
//async es7的异步
//event 接收前端传来的数据
//context 云函数状态码
exports.main = async (event, context) => {
  return{
    sun: event.a + event.b
  }
}

index1.wxml
<button type="primary" bindtap="bindEvent">按钮</button>

index1.js
//前端调用云函数
  bindEvent(){
    wx.cloud.callFunction({
      //name指定云函数名称
      name:'page',
      data:{ //传入数据
        a:4,
        b:6
      },success:(res)=>{
        console.log(res.result); //打印后台计算的结果
      },
      fail:(err)=>{
        console.log(err);
      }
    })
  }

结果：
在这里插入图片描述
async await promise的异步等待：
async：用户声明异步，常用于处理回调函数，返回promise对象，可以用.then .catch来处理结果
await：会阻止后面的代码运行，它后面的代码会等待上一个await完成再走，用于处理回调地狱
示例：

index.js
exports.main = async (event, context) => {
  var page = await new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(event.a + event.b)
    },5000)
  })
  return page
}