![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序-原生
原生微信小程序
落花流雨
这个作者很懒,什么都没留下…
展开
-
微信小程序:封装微信原生方法
封装微信原生方法封装请求:utils / index.js// 封装请求方法function request(method, url, data) { return new Promise((resolve, reject) => { wx.showLoading({ title: '加载中', }) wx.request({ method, url, data, success: res =>原创 2021-01-03 21:36:58 · 616 阅读 · 1 评论 -
微信小程序日历弹框组件
参考文章:https://blogai.cn/posts/46calendar.json{ "usingComponents": {}, "disableScroll": true}calendar.wxml<view class="titleDate"> <button class="cu-btn" bindtap="lastMonth"> <text class="cuIcon-back"><</text> <.转载 2020-09-23 00:47:52 · 1298 阅读 · 0 评论 -
小程序如何跳转url链接
小程序如何跳转url链接业务逻辑:使用导航标签实现页面跳转 <navigator url="/pages/webLink/webLink" hover-class="none"> <view class="user_book">跳转百度</view> </navigator>在跳转的页面使用标签:<web-view></web-view>小技巧:清除链接缓存方法:在url地址后面,随意拼接参数web-原创 2020-07-08 19:11:12 · 4785 阅读 · 1 评论 -
微信小程序:常见bug 和 解决方案
微信小程序:常见bug 和 解决方案1. 小程序进入页面图片渲染会拉伸闪下变形优化参考文档:https://www.jianshu.com/p/bdaf34809a89需求:有些从接口传递过来的图片,本身图片大小不是固定一个比例,全部渲染显示在页面上,会有唰得拉伸从大到小快速闪下变形的bug,很影响用户体验。解决方法:image的mode图片剪裁缩放模式用mode='widthFix'(宽度不变,高度自动变化,保持原图宽高比不变),记得要在css里也加上height:auto,可以消除渲转载 2020-07-05 16:37:35 · 4849 阅读 · 0 评论 -
微信小程序样式拼接 类名三元运算 以及条件拼接
微信小程序样式拼接 类名三元运算 以及条件拼接style行内样式拼接<view class='navbar-title' style=' top:{{navTop}}px; color:{{titColor}}; background:url({{info.goods_img}}) no-repeat;'> {{pageName}}</view><!--info.goods_img --> 为变量属性。style行内样式三元运算拼接<view原创 2020-06-29 11:01:07 · 2569 阅读 · 0 评论 -
微信小程序:常见bug 和 动态添加类名
微信小程序:常见bug弹框和遮罩层显示在可视窗口的中间实现方法:动态为最外层标签添加类名(固定定位)isShow_pay 控制弹框和遮罩层的显示和隐藏<view class="measure_result {{isShow_pay?'measure_del':''}}"></view>.measure_del { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflo原创 2020-06-26 18:50:20 · 455 阅读 · 0 评论 -
微信小程序--个人中心:tab切换-高级版
微信小程序–个人中心包含功能点:tab切换-高级版全部订单-待付款-待收货-退款退货结构:user.wxml<view class="user_info_wrap"> <view class="user_img_wrap" wx:if="{{userinfo.avatarUrl}}"> <image class="user_bg" src="{{userinfo.avatarUrl}}"></image> <view原创 2020-06-23 00:43:43 · 537 阅读 · 0 评论 -
微信小程序功能:轮播图--双重for循环
微信小程序–首页index包含功能点:轮播图商品分类商品楼层:双重for循环结构:index.wxml<view class="pyg_index"> <!-- 搜索框 --> <searchInput></searchInput> <!-- 轮播图 --> <view class="index_swiper"> <swiper autoplay="{{true}}" indicator原创 2020-06-23 00:39:04 · 2349 阅读 · 0 评论 -
微信小程序:图片上传--意见反馈
微信小程序–意见反馈页面包含功能点:意见反馈上传图片结构:feedback.wxml<tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <view class="fb_main"> <view class="fb_title">问题的种类</view> <view class="fb_tips">原创 2020-06-23 00:35:07 · 980 阅读 · 0 评论 -
微信小程序--收藏页面
微信小程序–收藏页面包含功能点:商品收藏页面展示结构:collect.wxml<tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <view class="collect_main"> <view class="collect_title"> <text class="collect_tips active">全部</text>原创 2020-06-23 00:30:57 · 3841 阅读 · 0 评论 -
微信小程序功能:用户授权
微信小程序–授权页面包含功能点:用户授权结构:auth.wxml<!--pages/auth/auth.wxml--><button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权</button>样式:auth.lesspage{ padding-top: 80rpx;}button { margin: auto;原创 2020-06-23 00:26:22 · 1311 阅读 · 0 评论 -
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点:订单查询结构:order.wxml<tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <view class="order_main"> <view wx:for="{{orders}}" wx:key="order_id" class="order_item"> <view class原创 2020-06-23 00:20:52 · 7961 阅读 · 1 评论 -
微信扫码支付
微信小程序–支付页面(核心)包含功能点:微信扫码支付结构:pay.wxml<!-- 收货地址 --><view class="receive_address_row"> <view class="user_info_row"> <view class="user_info"> <view>{{address.userName}}</view> <view>{{addres原创 2020-06-23 00:16:21 · 296 阅读 · 0 评论 -
微信小程序:模糊查询--防抖和数据节流
微信小程序–搜索页面(核心)包含功能点:模糊查询防抖和数据节流结构:search.wxml<view class="search_row"> <input value="{{inputValue}}"type="text" placeholder="请输入您要搜索的商品" bindinput="handleInput"></input> <button hidden="{{!isFocus}}" bindtap="handleCan原创 2020-06-23 00:12:14 · 908 阅读 · 0 评论 -
微信小程序功能:全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心)包含功能点:全选和反选计算:总价格和总数量修改商品数量、删除商品收货地址结构:cart.wxml<!-- 收货地址 --><view class="receive_address_row"> <!-- 当收货地址不存在 按钮显示 注意:空对象的bool类型也是true --> <view class="address_btn" wx:if="{{!address.userName}}">原创 2020-06-23 00:05:02 · 2586 阅读 · 0 评论 -
微信小程序功能:商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点:商品收藏图片预览客服分享加入购物车跳转到购物车页面(注意:open-type="switchTab")结构:goods_detail.wxml<!-- 轮播图 --><view class="detail_swiper"> <swiper autoplay="{{true}}" circular="{{true}}" indicator-dots="{{true}}"> <swiper-it原创 2020-06-22 23:58:13 · 2280 阅读 · 2 评论 -
微信小程序功能:上拉加载、下拉刷新,tabs组件,文本溢出
微信小程序–商品列表页面包含功能点:tab切换–自定义tabs组件上拉加载更多和下拉刷新如果后台没有图片,显示暂无图片商品内容:显示2行,超出省略号代替…结构:goods_list.wxml<searchInput></searchInput><tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <block wx:if="{{tabList[0].isActive}原创 2020-06-22 23:48:42 · 674 阅读 · 0 评论 -
商品列表页面:功能点(tab切换、上拉加载、下拉刷新)
微信小程序–商品列表页面包含功能点:tab切换–自定义tabs组件上拉加载更多和下拉刷新如果后台没有图片,显示暂无图片商品内容:显示2行,超出省略号代替…<searchInput></searchInput><tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <block wx:if="{{tabList[0].isActive}}"> <view原创 2020-06-20 22:14:32 · 1453 阅读 · 0 评论 -
微信小程序–自定义公共组件
微信小程序–自定义公共组件存放位置:component/自定义组件名-称文件夹使用方法:在页面的json文件中,然后在页面以标签形式使用{ "usingComponents": { "searchInput": "../../component/searchInput/searchInput", "tabs": "../../component/tabs/tabs" }, "navigationBarTitleText": "商品列表"}搜索框:searchInput原创 2020-06-20 19:20:11 · 507 阅读 · 0 评论 -
微信小程序–商品分类页面(左右滚动条)
微信小程序–商品分类页面(左右滚动条)接口数据:https://api-hmugo-web.itheima.net/api/public/v1/categories分类页面的结构<view class="cates"> <searchInput></searchInput> <view class="cates_container"> <!-- 左侧菜单 --> <scroll-view class="lef原创 2020-06-20 18:43:34 · 5489 阅读 · 0 评论 -
微信小程序–样式
微信小程序–样式1.布局小技巧1.1 通过添加空标签,实现内容之间的间隔 <view class='height_20'></view>.height_20{ height: 20px;}1.2 实现下划线 <view class='height_1 gray'></view> .gray{ background-color: #F0F0F0;}.height_1{ height: 1px;}1.3 用一个空盒子,原创 2020-06-20 18:25:03 · 360 阅读 · 0 评论 -
微信小程序–分类导航
微信小程序–分类导航UI直接给整个图片:里面包含文字和对应的分类导航图片<!-- 导航 --> <view class="index_cate"> <navigator wx:for="{{cateList}}" wx:key="name"> <image src="{{item.image_src}}" mode="widthFix" lazy-load="true" /> </navigator> &l原创 2020-06-20 09:53:49 · 3077 阅读 · 0 评论 -
微信小程序:轮播图
基础知识:swiper标签存在默认的宽度和高度:100% * 150pxswiper 高度 无法实现由内容撑开先找出来 原图的宽度和高度,等比例 给 swiper 定 宽度和高度原图的宽度和高度: 1125 * 352pxswiper宽度 / swiper高度 = 原图的宽度 / 原图的高度swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度height: 100vw * 352 / 1125image标签也存在默认的宽度和.原创 2020-06-20 09:45:45 · 332 阅读 · 0 评论 -
微信小程序之页面传值(路由、页面栈、globalData、缓存)
微信小程序之页面传值(路由、页面栈、globalData、缓存)感谢下面博主分享的文章,稍作整理当做小程序学习笔记。https://blog.csdn.net/qq_28685759/article/details/78292012https://www.cnblogs.com/cckui/p/10212398.html方式一:通过url带参数传递固定参数传递:通过navigator标签的url属性,实现跳转和传递参数<navigator url="../detail/detail?i原创 2020-06-19 00:22:47 · 861 阅读 · 0 评论 -
微信小程序中this.data与this.setData的区别详解
微信小程序中this.data与this.setData的区别详解this.data与this.setData的关系就是this.setData里面存储的是this.data的副本,而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面,因为这个时候的this.setData里面的副本还是没有更新前的其中this.data是用来获取页面data对象的this.setData是用来更新界面的注意:直接修改 this原创 2020-06-18 23:45:01 · 3084 阅读 · 1 评论 -
小程序封装request请求
封装request请求与page平级新建request/index.js文件使用方法:在页面的.js文件最上面添加import {request} from "../../request/index.js";小程序中支持es7的async语法(适用:不考虑兼容性的情况)注意:如果要适配某些旧手机,就不要使用es7语法;而采用promise语法es6语法使用方法:稳妥办法项目采用promise语法getSwiperList(){ request({url:"/home/swiperd原创 2020-06-18 00:30:54 · 518 阅读 · 0 评论 -
封装原生微信小程序API
封装原生微信小程序API与page平级新建文件夹 utils/asyncWx.js在需要的页面按需引入:import {getSetting,chooseAddress} from "../../utils/asyncWx.js"// 获取用户的唯一标识opendidexport function getStorageOpenid() { const openId = wx.getStorageSync('openId') if (openId) { return openI原创 2020-06-18 00:17:57 · 543 阅读 · 0 评论 -
原生小程序生命周期
应用生命周期和页面生命周期应用生命周期应用生命周期使用场景onLaunch用于获取用户的个人信息onShow对应用的数据或者页面效果 重置onHide暂停或者清除定时器onError在应用发生代码报错的时候,收集用户的错误信息,通过异步请求 将错误的信息发送到后台onPageNotFound如果页面不存在了,通过js的方式来重新跳转页面 重新跳到第二个首页;不能跳到tabbar页面 导航组件类似页面生命周期页面生命周期使用场景原创 2020-06-18 00:05:24 · 424 阅读 · 0 评论 -
原生小程序--组件专题
组件的的生命周期Component({ lifetimes: { attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, ready() { // 在组件在视图层布局完成后执行 } }})组件~数据监听器observers: { // 监听对象里面某个属性的变化 ['obj.属原创 2020-06-18 00:03:23 · 104 阅读 · 0 评论 -
原生小程序常见组件
常见组件组件文档view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox。等text标签文本标签只能嵌套text长按文字可以复制(只有该标签有这个功能)可以对空格 回车 进行编码属性名类型默认值说明selectableBooleanfalse文本是否可选decodeBooleanfalse是否解码image标签image图片文档:https://dev原创 2020-06-17 23:58:06 · 1340 阅读 · 0 评论 -
原生小程序基础语法
原生小程序基础语法:数据绑定data中定义的数据,在标签的属性中使用data: { num: 1000, isHide: true },<view data-num="{{num}}"></view>//=>查看控制台 Wxml使用bool类型充当属性 checked字符串和花括号之间一定不要存在空格,否则可能会导致识别失败。以下写法就是错误示范:<checkbox checked=" {{isHide}}"&原创 2020-06-17 23:54:25 · 548 阅读 · 0 评论 -
微信小程序–常见问题和解决方案
微信小程序–常见问题和解决方案参数赋值:https://www.jb51.net/article/147523.htm页面传值:https://www.cnblogs.com/cckui/p/10212398.html防止多次点击跳转:https://www.2cto.com/kf/201802/718864.html原创 2020-06-17 23:41:30 · 916 阅读 · 0 评论 -
原生小程序--引入字体图标和搭建tabbar
引入字体图标在项目根目录 / styles / iconfont.wxss省略...在app.wxss中引入@import "./styles/iconfont.wxss";在页面中使用<view class="inonfont 字体图标名称"></view>搭建tabbar结构在app.json文件中,与 window平级注意:tabbar里面的pagePath路径,必须首先存在于 pages里面才可以!!! "pages": [原创 2020-06-17 23:37:54 · 1770 阅读 · 0 评论 -
原生微信小程序--帮助文档
原生微信小程序–帮助文档小程序第三方框架:腾讯 wepy 类似vue美团 mpvue 语法类似 vue京东 taro类似react滴滴 chameleonuni-app 类似vue原生框架 MINA微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/阿里巴巴字体 iconfont:https://www.iconfont.cn/本地图片变成网络图片:https://images.ac.cn/接口原创 2020-06-17 23:25:19 · 1100 阅读 · 0 评论 -
原生小程序--初始化页面样式--(屏幕适配rpx)
常用flex布局样式文件:flex.wxss.u-f,.u-f-ac,.u-f-ajc { display: flex;}.u-f-ac,.u-f-ajc { align-items: center;}.u-f-ajc { justify-content: center;}.u-f-jsb { justify-content: space-between;}app.wxss页面中/* 引入外部文件 */@import "./styles/iconfont.wxss".原创 2020-06-17 22:16:43 · 688 阅读 · 0 评论 -
小程序中使用less
小程序中使用less原生小程序不支持 less ,其他基于小程序的框架大体都支持,如wepy、mpvue,taro,等,但是仅仅因为一个less功能,而去引入一个框架,肯定是不可取的。因此可以用以下方式来实现编辑器是vscode安装插件easy less在vscode的设置中加入如下,配置:打开vscode编辑器–> 左下角设置–>右上角打开设置–>settings.json文件"less.compile": { "outExt": ".wxss"}在要编写样原创 2020-06-17 22:00:42 · 835 阅读 · 0 评论 -
原生小程序开发--注意事项
在小程序中标签如果要使用背景图片 background-image: url()不允许使用小程序的本地图片只能使用网络图片 或者 (仅限小图片)转换base64格式的图片 (百度:在线制作base64)页面 .js文件中 存放事件回调函数的时候 存放在data同层级下!!组件 .js文件中 存放事件回调函数的时候 必须要存放在 methods中!!在vscode里面编辑全局配置文件的时候,系统不会帮你新增页面的。解决方法:手动在微信开发者工具里面,找到..原创 2020-06-17 21:52:38 · 334 阅读 · 0 评论