- 博客(50)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 页面控制显示返回头部
页面控制显示返回头部(大佬提供)调用原生方法 window.ele_med_insurance.controlBackButton(b);b = 'true' 页面控制返回跳转;b = 'false' 原生控制返回方法；例 页面控制返回跳转;if(window.ele_med_insurance){//controlBackButton true 页面控制返回跳转 window.controlBackButton window.ele_med_insurance.co
2020-06-30 20:14:29
495
原创 mpvue小程序功能：轮播图
mpvue小程序功能：轮播图结构<!-- 轮播图 --> <div class="swiper"> <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" circular="true" duration="500" >
2020-06-29 23:44:01
493
转载 Vue Router 的params和query传参的使用和区别
Vue Router 的params和query传参的使用和区别知识补充：router和router和router和route的区别$router : 是路由操作对象，只写对象$route : 路由信息对象，只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})//读取 路由参数接收this.name =
2020-06-29 11:36:02
276
1
原创 微信小程序样式拼接 类名三元运算 以及条件拼接
微信小程序样式拼接 类名三元运算 以及条件拼接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
2592
原创 mpvue小程序： App.vue文件（全局样式）
mpvue小程序： App.vue文件<script>export default { created () { // 调用API从本地缓存中获取数据 var userInfo = { openId: "023vXGet0wswDi1Iktft04mXet0vXGe5", nickName: "落花流雨", gender: 1, language: "zh_CN", city: "Changping",
2020-06-27 10:49:36
1094
原创 mpvue小程序：高德地图实时获取地理位置
mpvue小程序：高德地图实时获取地理位置前期准备：高德开发平台，申请key：https://lbs.amap.com/api/wx/gettingstarted使用vuex进行全局状态管理首先安装vuex： npm i vuex -S新建 src / store / index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ stat
2020-06-27 10:46:06
883
原创 微信小程序：常见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
471
原创 基于vue2和mpvue开发小程序：（创建项目和less语法）
初始化一个mpvue项目首先安装Node.js 和 vue-cli脚手架工具npm install -g vue-cli@2.9创建一个基于 mpvue-quickstart 模板的新项目vue init mpvue/mpvue-quickstart 项目名称然后按照提示运行：中间会询问一下问题：前面几项直接回车直到：询问是否安装 vuex 和 ESLint，根据需要安装即可。其余全部选中默认，直接回车cd 项目目录npm install>>>>&g
2020-06-26 13:18:31
192
原创 mpvue小程序：package.json 和 app.json文件（tabbar配置）
mpvue小程序：配置文件 package.json{ "name": "mpv", "version": "1.0.0", "mpvueTemplateProjectVersion": "0.1.0", "description": "A Mpvue project", "author": "吴东 <qianduanwd@163.com>", "private": true, "scripts": { "dev:wx": "node build/dev-s
2020-06-26 12:54:43
944
原创 基于vue2和mpvue开发小程序：（创建项目和less语法）
初始化一个mpvue项目首先安装Node.js 和 vue-cli脚手架工具npm install -g vue-cli@2.9创建一个基于 mpvue-quickstart 模板的新项目vue init mpvue/mpvue-quickstart 项目名称然后按照提示运行：中间会询问一下问题：前面几项直接回车直到：询问是否安装 vuex 和 ESLint，根据需要安装即可。其余全部选中默认，直接回车cd 项目目录npm install>>>>&g
2020-06-26 10:25:21
213
原创 微信小程序--个人中心：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
551
原创 微信小程序功能：轮播图--双重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
2362
原创 微信小程序：图片上传--意见反馈
微信小程序–意见反馈页面包含功能点：意见反馈上传图片结构：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
995
原创 微信小程序--收藏页面
微信小程序–收藏页面包含功能点：商品收藏页面展示结构：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
3877
原创 微信小程序功能：用户授权
微信小程序–授权页面包含功能点：用户授权结构：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
1318
原创 微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点：订单查询结构：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
8061
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
301
原创 微信小程序：模糊查询--防抖和数据节流
微信小程序–搜索页面（核心）包含功能点：模糊查询防抖和数据节流结构：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
923
原创 微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面（核心）包含功能点：全选和反选计算：总价格和总数量修改商品数量、删除商品收货地址结构：cart.wxml<!-- 收货地址 --><view class="receive_address_row"> <!-- 当收货地址不存在 按钮显示 注意：空对象的bool类型也是true --> <view class="address_btn" wx:if="{{!address.userName}}">
2020-06-23 00:05:02
2622
原创 微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点：商品收藏图片预览客服分享加入购物车跳转到购物车页面（注意：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
2465
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
684
原创 商品列表页面：功能点(tab切换、上拉加载、下拉刷新)
微信小程序–商品列表页面包含功能点：tab切换–自定义tabs组件上拉加载更多和下拉刷新如果后台没有图片，显示暂无图片商品内容：显示2行，超出省略号代替…<searchInput></searchInput><tabs tabList="{{tabList}}" binditemChange="handleItemChange"> <block wx:if="{{tabList[0].isActive}}"> <view
2020-06-20 22:14:32
1465
原创 微信小程序–自定义公共组件
微信小程序–自定义公共组件存放位置：component/自定义组件名-称文件夹使用方法：在页面的json文件中，然后在页面以标签形式使用{ "usingComponents": { "searchInput": "../../component/searchInput/searchInput", "tabs": "../../component/tabs/tabs" }, "navigationBarTitleText": "商品列表"}搜索框：searchInput
2020-06-20 19:20:11
520
原创 微信小程序–商品分类页面（左右滚动条）
微信小程序–商品分类页面（左右滚动条）接口数据：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
5550
原创 微信小程序–样式
微信小程序–样式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
382
原创 微信小程序–分类导航
微信小程序–分类导航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
3089
原创 微信小程序：轮播图
基础知识：swiper标签存在默认的宽度和高度：100% * 150pxswiper 高度 无法实现由内容撑开先找出来 原图的宽度和高度，等比例 给 swiper 定 宽度和高度原图的宽度和高度： 1125 * 352pxswiper宽度 / swiper高度 = 原图的宽度 / 原图的高度swiper高度 = swiper宽度 * 原图的高度 / 原图的宽度height: 100vw * 352 / 1125image标签也存在默认的宽度和.
2020-06-20 09:45:45
397
原创 微信小程序之页面传值(路由、页面栈、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
944
原创 微信小程序中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
3111
1
原创 基于vue实现屏幕适配hotcss以及产生第三方UI库样式变小问题（完美解决方案）
基于vue实现屏幕适配：hotcss这篇文章完美解决问题：https://www.jianshu.com/p/2614459192b0第一步：在github里面搜索：hotcss，下载相关的文件：https://github.com/imochen/hotcss/tree/master/src第二步：将文件放置在 src / assets / hotcss / 放置下载的文件第三步：在main.js中，首先引入hotcss.js文件：// 引入hotcssimport './assets/ho
2020-06-18 13:16:16
623
原创 小程序封装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
526
原创 封装原生微信小程序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
548
原创 小程序生命周期
应用生命周期和页面生命周期应用生命周期应用生命周期使用场景onLaunch用于获取用户的个人信息onShow对应用的数据或者页面效果 重置onHide暂停或者清除定时器onError在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送到后台onPageNotFound如果页面不存在了，通过js的方式来重新跳转页面 重新跳到第二个首页；不能跳到tabbar页面 导航组件类似页面生命周期页面生命周期使用场景
2020-06-18 00:16:16
55
原创 原生小程序生命周期
应用生命周期和页面生命周期应用生命周期应用生命周期使用场景onLaunch用于获取用户的个人信息onShow对应用的数据或者页面效果 重置onHide暂停或者清除定时器onError在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送到后台onPageNotFound如果页面不存在了，通过js的方式来重新跳转页面 重新跳到第二个首页；不能跳到tabbar页面 导航组件类似页面生命周期页面生命周期使用场景
2020-06-18 00:05:24
429
原创 原生小程序--组件专题
组件的的生命周期Component({ lifetimes: { attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, ready() { // 在组件在视图层布局完成后执行 } }})组件~数据监听器observers: { // 监听对象里面某个属性的变化 ['obj.属
2020-06-18 00:03:23
115
原创 原生小程序常见组件
常见组件组件文档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
1363
原创 原生小程序基础语法
原生小程序基础语法：数据绑定data中定义的数据，在标签的属性中使用data: { num: 1000, isHide: true },<view data-num="{{num}}"></view>//=>查看控制台 Wxml使用bool类型充当属性 checked字符串和花括号之间一定不要存在空格，否则可能会导致识别失败。以下写法就是错误示范：<checkbox checked=" {{isHide}}"&
2020-06-17 23:54:25
561
原创 微信小程序–常见问题和解决方案
微信小程序–常见问题和解决方案参数赋值：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
929
原创 原生小程序--引入字体图标和搭建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
1811
原创 原生微信小程序--帮助文档
原生微信小程序–帮助文档小程序第三方框架：腾讯 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
1125
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人