微信小程序

最新推荐文章于 2021-11-25 19:18:10 发布
最新推荐文章于 2021-11-25 19:18:10 发布
阅读量228 收藏
点赞数
分类专栏： 前端 文章标签： 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45857808/article/details/109478546
版权

radio

<!-- radio必需要搭配父元素radio-group来使用 -->
<radio-group bindchange="handleChange">
    <radio value="male">男</radio>
    <radio value="female">女</radio>
    <view>
        你选中的是{{gender}}
    </view>
</radio-group>

gender: ""
handleChange(e) {
    let gender = e.detail.value;
    this.setData({
        gender
    })
}

checkbox

<checkbox-group bindchange="handleItemChange">
   <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">
       {{item.name}}
   </checkbox>
</checkbox-group>
  <view>
      选中的水果:{{checklist}}
  </view>

checklist: []
handleItemChange(e) {
    let checklist = e.detail.value;
    this.setData({
        checklist
    })
},

自定义组件

1、创建components文件夹（与page同级）

2、新增组件

3、声明组件

//home.json
{
  "usingComponents": {
    "tabs":"../../components/Tabs/tabs"
  }
}

4、使用组件

<!--home.wxml-->
<tabs></tabs>

5、定义组件

<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabs}}" wx:key="id" class="tabs_item {{item.isActive?'active':''}}" bindtap="itemTap" data-index="{{index}}">
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content">内容</view>
</view>

methods: {
    itemTap(e) {
        // 1 绑定点击事件
        // 2 获取被点击的索引
        // 3 获取原数组
        // 4 对数组循环
        // 1给每一个循环性 选中属性 改为 false
        // 2给当前索引的项添加激活选中效果

        //获取索引
        const { index } = e.currentTarget.dataset;
        //获取data中的数组
        //解构：对复杂类型进行解构的时候，复制了一份变量的引用
        //最严谨的做法 重新拷贝一份数组 再对这个数组的备份进行处理
        //深拷贝
        // let tabs=JSON.parse(JSON.stringify(this.data.tabs))
        let { tabs } = this.data;
        // let tabs = this.data.tabs;
        //循环数组
        tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
        this.setData({
            tabs
        })
    }
}

父传子

1、在父组件定义

<!-- 父组件向子组件传值 通过标签属性的方式来传递
<tabs  tabs="{{tabs}}"></tabs>

//home.js
tabs: [{
            id: 0,
            name: "首页",
            isActive: true
        },
        {
            id: 1,
            name: "原创",
            isActive: false
        },
        {
            id: 2,
            name: "分类",
            isActive: false
        }, {
            id: 3,
            name: "关于",
            isActive: false
        }
    ]

2、在子组件接收properties:{}

//tabs.js
properties: {
    //要接受数据的名称,把它当成data里面的数据使用即可
       tabs: {
        type: Array,
        value: []
    }
},

3、在子组件中使用

<view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" class="tabs_item {{item.isActive?'active':''}}" bindtap="itemTap" data-index="{{index}}">
        {{item.name}}
    </view>
</view>
<view class="tabs_content">内容</view>

子传父

1、triggerEvent(“父组件中自定义事件的名称”,要传的的参数)

//子组件的tab.js
// 触发父组件中自定义事件，同时传递数据给父组件
// this.triggerEvent("父组件中自定义事件的名称",要传的的参数)
this.triggerEvent("itemChange", { index })

2、父组件中使用

<!--父组件中使用
子向父传递数据 通过事件的方式传递
在子组件的标签上加入一个自定义事件-->
<tabs tabs="{{tabs}}" binditemChange="handleItemChangefather"></tabs>

3、

//父组件的home.js
handleItemChangefather(e) {
    //自定义事件，用来接受子组件传递的数据的
    const { index } = e.detail;
    // let tabs=JSON.parse(JSON.stringify(this.data.tabs))
    let { tabs } = this.data;
    // let tabs = this.data.tabs;
    //循环数组
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
        tabs
    })
},

slot

//子组件tabs.wxml
<view>
    <slot></slot>
</view>

//父组件home.wxml
<tabs tabs="{{tabs}}" binditemChange="handleItemChangefather">
    <block wx:if="{{tabs[0].isActive}}">1</block>
    <block wx:elif="{{tabs[1].isActive}}">2</block>
    <block wx:elif="{{tabs[2].isActive}}">3</block>
    <block wx:else>4</block>     
</tabs>

应用生命周期

//app.js
App({
    //应用第一次启动就会触发的事件
    //在应用第一次启动的时候，获取用户的个人信息
    onLaunch: function() {
        // js方式来跳转 无法触发onPageNotFound
        // wx.navigateTo({
        //   url: '',
        //   success: (result) => {
            
        //   },
        //   fail: () => {},
        //   complete: () => {}
        // });    
    },
    //应用被用户看到
    onShow() {
        // 对应用的数据或页面效果 重置
        console.log("onshow");
    },
    //应用被隐藏了
    onHide() {
        // 暂停或者清除定时器
        console.log("onHide");
    },
    // 应用代码发生错误
    onError(err) {
        //在应用发生代码报错的时候，收集用错误信息，通过异步请求，将错误信息发送到后台去
        console.log(err);
    },
    // 页面找不到就会触发
    // 应用第一次启动的时候,如果找不到第一个入口页面 才会触发
    onPageNotFound() {
      // 如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页
      //不能跳到tabbar页面
      wx.navigateTo({
        url: '/pages/home/home', 
        })
        // console.log("onPageNotFound");

    },
})

页面生命周期

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {

},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function() {

},

/**
 * 生命周期函数--监听页面显示
 */
onShow: function() {

},

/**
 * 生命周期函数--监听页面隐藏 可以通过点击超链接来演示
 */
onHide: function() {

},

/**
 * 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示
 */
onUnload: function() {

},

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function() {

},

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function() {

},

/**
 * 用户点击右上角分享
 */
onShareAppMessage: function() {

},
/**
 * 页面滚动就可触发
 */   
onPageScroll(){

},
/**
 * 页面尺寸发生改变时触发
 * 小程序发生了横屏竖屏切换时触发
 */
onResize(){

},
/**
 * 必须要求当前页面也是tabbar页面
 * 点击的自己的tab item的时候才触发
 */
onTabItemTap(){

}

小程序的第三方框架

1、腾讯 wepy 类似vue

2、美团 mpvue语法 类似vue

3、京东 taro 类似react

4、滴滴 chameleon

5、uni-app 类似vue

项目搭建

1、搭建页面基本结构

在这里插入图片描述

2、页面

接口使用

onLoad: function(options) {
    //1、发送异步请求
    wx.request({
        url: 'http://182.92.68.5/my.json',
        success: (result) => {
            console.log(result);
            this.setData({
                swiperlist: result.data.image
            })
        },
    });
}

将原生请求修改为Promise方式

1、在request文件夹下创建一个index.js
//封装
export const request = (params) => {
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            success: (result) => {
                resolve(result);
            },
            fail: () => {
                reject(err);
            }
        });
    })
}
2、导出使用
import {
    request
} from "../../request/index"

onLoad: function(options) {
    this.getSwiperdata();
},
    //1、发送异步请求
getSwiperdata() {
    request({
        url: "http://182.92.68.5/my.json"
    }).then(result => {
        this.setData({
            swiperlist: result.data.image
        })
    })
},

配置less为wxss文件

 "less.compile": {

  "outExt": ".wxss"

  // "compress": true,

  // "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件

  // "out": false, // 是否输出css文件，false为不输出

 },

两栏分别滚动

<view class="scoll_container">
    <scroll-view class="left" scroll-y>
        <view wx:for="{{100}}">
            {{item}}
        </view>
    </scroll-view>
      <scroll-view class="right" scroll-y>
        <view wx:for="{{100}}">
            {{item}}
        </view>
    </scroll-view>     
</view>

wxss
//运算符左右两边要有空格；
//数字和单位之间不能有空格；
//括号与减数，被减数之间不能有空格；
//以上无效记得加上英文~符和双引号。
.scoll_container {
    height: calc(100vh - calc(100vw/375*145));
    display: flex;
}

.scoll_container .left {
    flex: 2;
    background-color: red;
}

.scoll_container .right {
    flex: 5;
    background-color: aquamarine;
}

两层结构循环

在这里插入图片描述

使用缓存技术

在这里插入图片描述

存

getSwiperdata() {
    request({
        url: "http://182.92.68.5/my.json"
    }).then(result => {
        wx.setStorageSync("cates", { time: Date.now(), data: result.data.image });
        this.setData({
            swiperlist: result.data.image
        })
    })
},

取

//获取本地存储中的数据
const Cates = wx.getStorageSync("cates");
//判断
if (!Cates) {
    //不存在，发送请求获取新数据
    this.getSwiperdata()
} else {
    //有旧的数据，定义过期时间
    if (Date.now() - Cates.time > 1000 * 10) {
        //重新发送请求
        this.getSwiperdata();
    } else {
        //可以使用旧数据
        this.Cates = Cates.data;
        this.setData({
            swiperlist: result.data.image
        })
    }
}

提取公共接口路径

export const request = (params) => {
    //定义公共url
    const baseUrl = "http://182.92.68.5";
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success: (result) => {
                resolve(result);
            },
            fail: () => {
                reject(err);
            }
        });
    })
}

优化接口

简化返回值

export const request = (params) => {
    //定义公共url
    const baseUrl = "http://182.92.68.5";
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success: (result) => {
                resolve(result.data);
            },
            fail: () => {
                reject(err);
            }
        });
    })
}


//1、使用es7的async await来发送请求
const result = await request({ url: "/my.json" });
wx.setStorageSync("cates", { time: Date.now(), data: result.image });
this.setData({
    swiperlist: result.image
})

使用es7的asysc

在这里插入图片描述

//1、使用es7的async await来发送请求
const result = await request({ url: "/my.json" });
wx.setStorageSync("cates", { time: Date.now(), data: result.data.image });
this.setData({
    swiperlist: result.data.image
})

省略号

view{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

加载下一页onReachBottom

在这里插入图片描述

//es6数组拼接
let a = [1, 2, 3]
let b = [4, 5]
let c = [...a, ...b]

下拉刷新onPullDownRefresh

在这里插入图片描述

1、配置json

"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

2、重置数据、、、

onPullDownRefresh: function() {
    this.setData({
        swiperlist: []
    });
    this.getSwiperdata();
},

3、手动关闭

wx.stopPullDownRefresh();

放大预览图片

在这里插入图片描述

1、给图片绑定点击事件

<swiper autoplay interval="1000" duration="1000" circular >
    <swiper-item wx:for="{{swiperlist}}" wx:key="index" bindtap="handlePrevewImage" data-url="{{item.url}}">
        <image src="{{item.url}}" />         
    </swiper-item>     
</swiper>

2、调用API

//点击轮播图放大预览
handlePrevewImage(e) {
    //先构造要预览的图片数组
    const urls = this.preSwiperimage.map(v => v.url);
    //接收传递过来的图片url
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
    })
},

1、this.setData，setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

2、微信小程序不支持jQuery和DOM操作修改样式，但可以先写两套样式然后使用三元运算符

3、e.currentTarget.dataset和e.target.dataset都可以获取数据效果一样，除非遇到了事件冒泡，

target：事件源组件对象(事件冒泡源头)

currentTarget：当前组件对象(就是当前对象)

dataset：HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

登录

<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">登录</button>

handleGetUserInfo(e) {
    console.log(e);
    const {
        userInfo
    } = e.detail;
    wx.setStorageSync("userinfo", userInfo);
    wx.navigateBack({
        delta: 1
    });
},

在用户中心拿出登录的数据

onShow: function() {
    const userinfo = wx.getStorageSync("userinfo");
    this.setData({
        userinfo
    })
},

高斯模糊

filter:blur(5px);//值越大越模糊

set和e.target.dataset都可以获取数据效果一样，除非遇到了事件冒泡，

target：事件源组件对象(事件冒泡源头)

currentTarget：当前组件对象(就是当前对象)

dataset：HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。


# 登录

登录

handleGetUserInfo(e) {
console.log(e);
const {
userInfo
} = e.detail;
wx.setStorageSync(“userinfo”, userInfo);
wx.navigateBack({
delta: 1
});
},


# 在用户中心拿出登录的数据

onShow: function() {
const userinfo = wx.getStorageSync(“userinfo”);
this.setData({
userinfo
})
},


# 高斯模糊

filter:blur(5px);//值越大越模糊
liminla!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序仿朋友圈 上传图片 定位
banzi2045的博客
04-24 911
两个页面 ，，上面是效果图！！！！ 以下代码有部分是开发时用到的代码，懒的删了。不需要的自行删除 代码如下 : //index.wxml 发布页面 <form bindsubmit="formSubmit"> <view class="section"> <textar...
微信小程序 checkbox组件详解及简单实例
08-31
主要介绍了微信小程序 checkbox组件详解及简单实例的相关资料,需要的朋友可以参考下
微信小程序支持ES7的async
qq_37698249的博客
11-15 243
微信小程序支持ES7的async语法 facebook库（编译async语法） 打开上面链接，复制runtime.js所有代码 在小程序项目根目录中，新建目录 lib/runtime/runtime.js 在每一个需要使用async语法的js页面中，都引入（不可全局引入） import regeneratorRuntime from "../../lib/runtime/runtime"; ...
微信小程序中支持es7的async语法
lgrrrr的博客
10-19 453
原生的微信小程序项目中需要把原来es6的promise方法改成es7的async await，这样代码看起来更直观，也方便以后的兄弟维护 解决办法 在小程序开发工具中勾选es6转es5语法 下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js 注意：这里的给出的库是指定版本的，不要下载最新的。 在小程序目录下新建文件夹 lib/runtime/runtime.js，将代码拷贝进去。 在每一个需要使
手机应用测试check list之［用户体验篇］
赵三哥的博客
09-16 571
点击流，按钮的checklist，激励机制
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
【微信小程序-毕设期末大作业】源码电商类微信小程序
最新发布
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
微信小程序源码-仿饿了么.zip
03-24
微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序...
食堂点餐微信小程序源码.zip
03-17
食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序源码.zip食堂点餐微信小程序...
微信小程序中使用Async-await方法异步请求变为同步请求方法
01-03
微信小程序中有些 Api 是异步的，无法直接进行同步处理。例如：wx.request、wx.showToast、wx.showLoading等。如果需要同步处理，可以使用如下方法： 注意： Async-await方法属于ES7语法，在小程序开发工具中如果勾选es6转es5, 会报错： ReferenceError: regeneratorRuntime is not defined 避免报错，可以引入 regenerator 在根目录下创建 lib 文件夹，并将 https://github.com/facebook/regenerator/tree/master/packages 里面的
微信小程序期末大作业-手机商城微信小程序
12-15
微信小程序期末大作业-手机商城微信小程序（免积分下载） 含底部导航，轮播图等等，小程序运行截图请看我的文章介绍：https://blog.csdn.net/weixin_43474701/article/details/135025795
微信小程序点餐系统源码
05-14
微信小程序点餐系统源码是基于Java后台开发和微信小程序前端实现的一种在线餐饮订餐解决方案。这个系统允许用户通过微信小程序直接浏览餐厅菜单，选择菜品，完成下单，并进行支付，为顾客提供了便捷的用餐体验。下面...
个人简历微信小程序源码
05-30
个人简历微信小程序源码
微信小程序奶茶点餐系统
05-17
该资源包括后台服务及微信小程序两大服务、里面包括了首页展示、商品展示、快速下单、购物车详情、订单详情及历史购买信息；全套资源包括项目启动及调试相关资料步骤说明
在微信小程序中 使用 ES7 async解决回调地狱
weixin_33834628的博客
05-24 1245
在我们日常项目开发阶段，会遇到很多异步的函数，包括网络请求，微信的官方API等。这些函数如果不进行封装直接使用的话，会造成回调地狱的问题，回调函数一层套着一层，代码难以阅读，后期难以维护的问题。比如说下面这段代码. 我们可以使用 ES7中的async 解决这些回调问题，但是小程序并不支持async，网上也有很多人文章教我们如何在小程序中使用async 引入一个库facebook/regenera...
小程序中支持es7的async语法
Andy-ZhangSir的博客
08-17 361
微信小程序 选中与未选中的样式实现 多选框
热门推荐
onion_line的博客
06-01 1万+
未选中是白色背景 选中是蓝色背景 &lt;view&gt; &lt;checkbox-group name="checkbox" class="check"&gt; &lt;label bindtap='clicks' wx:for="{{checks}}" wx:key="{{checks}}" wx:for-index="in
微信小程序之 判断CheckBox选中状态
gyueh的博客
11-25 9226
目的：复选框未选中时，提交按钮为不可点击状态；复选框选中时，提交按钮为可点击状态 复选框未选中时 复选框选中时 wxml代码如下： <view class="bottom"> <view style="color:#999999;text-align:center;padding-bottom: 30rpx;"> <checkbox-group bindchange="checkboxChange"> <label class="ch
微信小程序入门.docx
10-05
微信小程序是一种轻量级的应用形态，用户无需下载安装即可在微信内便捷地使用。自2017年首次发布以来，它已经构建了一个庞大的开发环境和生态系统，吸引了超过150万的开发者参与，并覆盖了众多行业，每天有两亿活跃...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值