精华内容
下载资源
问答
  • wepy小程序开发视频

    2020-08-26 11:55:08
    一个很不错的wepy小程序教学视频,从构建构建到项目运行都是很完整,很适合刚接触wepy开发的朋友.视频+源码,不要错过这样的干货。下载txt文件下来,里面直接链接就可以下载。
  • WePy小程序问题汇总

    2019-10-11 09:42:48
    框架:Wepy小程序框架 + Vant移动端组件库 问题1: 项目测试中发现若干页面样式在一些华为手机上出现了适配问题,页面底部内容被虚拟键盘遮挡,无法显示完全。 产生原因: 因为虚拟键盘位于界面的可视区域,并且...
    框架:Wepy小程序框架 + Vant移动端组件库

    问题1:
    • 项目测试中发现若干页面样式在一些华为手机上出现了适配问题,页面底部内容被虚拟键盘遮挡,无法显示完全。
    产生原因:
    • 因为虚拟键盘位于界面的可视区域,并且占据了页面下方一定的高度。
    解决方法:
    1. app.wpy 页面获取设备品牌,设置为全局变量。获取系统信息API参考链接
       // 获取手机系统信息
       wx.getSystemInfo({ 
           success(res) {
               const brand = res.brand;
               if (brand.search('HUAWEI') !== -1 || brand.search('HONOR') !== -1) {
                   that.globalData.isHuaWei = true;
                   that.$apply();
               }
           }
       })
    
    1. 在需要兼容的页面,获取全局变量,区分手机型号进行样式重置。(增高页面下边距padding,生成垂直滚动条)
       onLoad () {
           this.isHuaWei = this.$parent.globalData.isHuaWei;
       }
    

    问题2:
    • 在使用三目运算符时eslint检查报错:Unnecessary use of boolean literals in conditional expression.eslint(no-unneeded-ternary)
    解决办法:
    // 错误方式:
    this.isAddedValueTax = result.invoiceType === 'Common'? false : true; 
    // 正确方式:
    this.isAddedValueTax = result.invoiceType !== 'Common';
    

    问题3:
    • 当用户多次快速点击发送验证码按钮,触发接口频率太高,接口报错
    解决办法:

    前端为发送验证码按钮,做倒计时限制。

    <view class="code">
        <input type="number" placeholder="请输入验证码" data-type="code" bindinput="bindInput" />
        <text class="send-code" wx:if="{{codeShow}}" @tap="sendCode">获取验证码</text>
        <text class="send-code" wx:if="{{!codeShow}}">{{count}}s</text>
    </view>
    
    data = {
        codeShow: true, // 是否显示发送验证码
        timer: null,
        count: '',
    };
    
    // 发送验证码倒计时限制
    sendCode() {
        if (this.codeShow) { // 初次点击先发送验证码,再触动更新btn名称,启动倒计时
            this.sendPhoneCode();
            this.codeShow = false;
        }
        if (!this.codeShow && !this.timer) {
            this.count = 60;
            this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= 60) {
                    this.count--;
                    this.$apply();
                } else {
                    this.codeShow = true;
                    clearInterval(this.timer);
                    this.timer = null;
                    this.$apply();
                }
            }, 1000)
        }
    },
    
    展开全文
  • [iwebchat]是有赞移动 Web UI 规范 ZanUI 的wepy小程序现实版本
  • wepy小程序时间选择控件,首次进入默认选择七天前至今天比如说(2020-3-14至2020-3-20).无论怎样选择变化时间间隔只能相差七天,并且后者选择器的结束日期为最新日期(同时提供了时间和时间戳方便给后端传输数据)...

    wepy小程序时间选择控件,首次进入默认选择七天前至今天比如说(2020-3-14至2020-3-20).无论怎样选择变化时间间隔只能相差七天,并且后者选择器的结束日期为最新日期(同时提供了时间和时间戳方便给后端传输数据)。

    wxml

    <template lang="wxml">
    	<!-- 时间控件  开始 -->
        <view>  
        <view class="picker_group">  
          <picker mode="date" value="{{beforeDateString}}" start="1970-01-01" end="{{beforeDateString}}" bindchange="bindDateChangeBefore">  
            <view class="picker">  
              {{beforeDateString}}  
            </view>  
          </picker>  
          至  
          <picker mode="date" value="{{nowDateString}}" start="1970-01-01" end="{{initialTime}}" bindchange="bindDateChangeNow" @tap="initialTime">  
            <view class="picker">  
              {{nowDateString}}  
            </view>  
          </picker>        
        </view>  
        </view>  
    </template>
    <!-- 时间控件  结束 -->
    

    css

        .picker_group {
          height: 85rpx;
          line-height: 85rpx;
          justify-content: center;
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #888;
          border-bottom: 1rpx solid #efefef;
    
        }
    
        .picker_group picker {
          color: #64bff1;
          height: 55rpx;
          line-height: 55rpx;
          margin: 0 2%;
          padding: 0 2%;
          border: 1rpx solid #64bff1;
          border-radius: 30rpx;
        }
    

    js

    export default class mainDetail extends wepy.page {
    		config = {
    			navigationBarTitleText: '时间控件'
    		}
    		data = {
    		     beforeDateString: '',//默认起始时间  
    		     nowDateString: '',//默认结束时间 
    		     nowTimestamp:'',//结束时间时间戳
    		     beforeTimestamp:'',  //开始时间时间戳
    		     initialTime:'',//仅供时间控件结束时间为最新时间
    		     }
    	  		onLoad(query) {
    		      //默认时间
    		      var nowDate = Date.parse(new Date()) ;
    		      var nowDate = nowDate / 1000
    		      this.nowTimestamp=nowDate//后时间戳
    		      this.beforeTimestamp=nowDate-24 * 60 * 60 * 6//前时间戳
    		      // 调用封装好的时间转换方法
    		      //后时间戳转换
    		       var nowDateString=this.timestampToTime(this.nowTimestamp);
    		       this.nowDateString=nowDateString
    		      console.log(this.nowDateString)
    		      //前时间戳转换
    		      var beforeDateString=this.timestampToTime(this.beforeTimestamp);
    		      this.beforeDateString=beforeDateString
    		      console.log(this.beforeDateString)
    			}
    		  //封装的时间戳转日期2020-02-20
    		   timestampToTime(timestamp) {
    		      var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
    		      var Y = date.getFullYear() + '-';
    		      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    		      var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
    		      var strDate = Y+M+D;
    		      return strDate;
    		    }
    	methods = {
        // 时间段选择  
          bindDateChangeBefore(e) {
            let that = this
            that.beforeDateString=e.detail.value
            var data=new Date(that.beforeDateString)
            var beforeData=data.getTime()/1000;
            that.beforeTimestamp=beforeData
            console.log("1-----" + beforeData)//选择日期的时间戳
            console.log("1-----" + that.beforeDateString)//选择的日期
            var noweData=data.getTime()/1000+24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 + 7天
            var nowTime=this.timestampToTime(noweData);
            that.nowDateString=nowTime
            that.nowTimestamp=noweData
            console.log("2------" + noweData)
            console.log("2------" + that.nowDateString)
            this.getEarningsInfo()
    
          },
          bindDateChangeNow(e) {
            let that = this
            that.nowDateString=e.detail.value
            var data=new Date(that.nowDateString)
            var noweData=data.getTime()/1000;
            that.nowTimestamp=noweData
            console.log("1-----" + noweData)//选择日期的时间戳
            console.log("1-----" + that.nowDateString)//选择的日期
            var beforeData=data.getTime()/1000-24 * 60 * 60 * 6;//选择后另一个自动变化的时间戳 -7天
            var beforeTime=this.timestampToTime(beforeData);
            that.beforeDateString=beforeTime
            that.beforeTimestamp=beforeData
            console.log("2------" + beforeData)
            console.log("2------" + that.beforeDateString)
            this.getEarningsInfo()
    
          },
          // 点击选择后者时间时限制只能选到今日
          initialTime(){
            let that = this
            var nowDate = Date.parse(new Date()) ;
            var nowDate = nowDate / 1000
            this.nowTimestamp=nowDate//后时间戳
            // 调用封装好的时间转换方法
            //后时间戳转换
            var nowDateString=that.timestampToTime(that.nowTimestamp);
            that.initialTime=nowDateString
            console.log(that.initialTime)
          }
    
    		
      }
    
    展开全文
  • wepy小程序项目

    2019-06-09 05:31:39
    # 安装(更新) wepy 命令行工具。 cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译。 npm run dev WePY开发文档参考 店铺 店铺首页 店铺信息 商品 分类展示 规格展现 购物车 商品详情 会员...
    # 安装(更新) wepy 命令行工具。
    cnpm install wepy-cli -g
    # 安装依赖包
    cnpm install
    # 开发实时编译。
    npm run dev
    

    WePY开发文档参考

    店铺

    • 店铺首页
    • 店铺信息

    商品

    • 分类展示
    • 规格展现
    • 购物车
    • 商品详情
    • 会员折扣价

    订单

    商品下单
    订单列表
    订单详情
    订单评价
    订单退款
    堂食点餐/外卖点餐

    优惠券

    我的优惠券
    领取优惠券
    使用优惠券
    扫码核销
    自助核销
    活动页面

    营销

    拼团
    砍价
    优惠券

    我的

    基本信息
    会员卡
    会员特权
    联系客服

    1 核 2 GB 1 Mbps

    系统盘:普通云硬盘

    购买域名:购买完域名之后建议去实名认证。

    域名备案:
    备案服务号申请
    申请备案服务号:(非常重要)

    购买域名(网址)

    安装WordPress免费建站平台

    小程序入口

    export class App extends wepy.app {
     onLaunch() {
    }
    }
    
    this.$pages = {
    './pages/index': IndexPage
    }
    
    this.$inter = {
     'request': {
      config(p) {
       return p;
      },
      success(rst) {
      }
     }
    }
    
    this.use('requestfix');
    this.use('promisify');
    

    使用wepy.xxx的方式请求小程序原生API都将Promise化

     // app.js
      constructor () {
          super();
          this.intercept('request', {
              config (p) {
                  p.timestamp = +new Date();
                  return p;
              },
              success (obj) {
                  console.log('request success');
              }
          });
      }
    

    image.png

    $emit(eventName:String, [args]):组件发起一个冒泡事件。
    
      this.userName = 'Gcaufy';
      this.$apply();
    
      this.$apply(() => {
          this.userName = 'Gcaufy';
      });
    
      this.$redirect('./page2', {a: 1, b: 2});
      this.$redirect({
          url: './pages?a=1&b=2'
      });
    
    $destroy():终止事件传播
    

    Mixin基类

    // mymixn.js
    export class MyMixin extends wepy.mixin {
        // my logic here
    }
    
    // mycom.js
    import MyMixin from './mymixin';
    export class MyCom extends wepy.component {
        mixins = [MyMixin];
    }
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

    展开全文
  • WePY小程序框架实战一】-创建项目 【WePY小程序框架实战二】-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型。 父组件 (parent.wpy) <view> &...
    <view>
        <child name="leinov"></child>
    </view>
    子组件(child.wpy)
    <template lang="wxml">
        <view>
            {{name}}
        </view>
    </template>
    
    <script>
    
        props={
            name:String
        }
        
        onLoad(){
            console.log(this.name);//leinov
        }
         
    </script>

    动态传值

    • sync修饰符来达到父组件数据绑定至子组件的效果
    • 也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果
    • 如果既使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定了。

    异步数据父子组件传值注意

    parent

    <script>
      export default class Parents extends wepy.page {
        
        data = {
            tabdata:{}, //下面要用这里必须要写上
        }
        
        async onLoad() {
            
           let data =  await getData(,"public/data",{session_key:"1234456"});
           this.tabdata= data.tab;
           this.$apply();//必须
        }
      }
    </script>
    <template lang="wxml">
       <view class="title" slot="title"></view>
       <view class="title" slot="content">
         <Tab :tab.sync="tabdata" ></Tab>
       </view>
    </template>

    child

    <template lang="wxml">
        <view class="title" slot="title">{{tab}}</view>
    </template>
    export default class Tab extends wepy.component {
          props = {
            tab:{
              type:Object,
              default:null,
              twoWay:true
            }
    }

    以下必须注意

    • 模版中要给子组件传的值 在data里要声明好
    • 取到异步值后要使用this.$apply()手动更新组件
    • 在父组件中调用子组件的属性名要加.sync
    • 子组件要使用父组件的props必须在props里声明
    展开全文
  • WePY小程序框架实战一】-创建项目 【WePY小程序框架实战二】-页面结构 【WePY小程序框架实战三】-组件传值 async await 是对promise的近一步优化,既解决了promise链式then的这种写法壁垒,又让异步请求更像同步...
  • 使用wepy 小程序授权点击取消授权失败的方案 在wepy里使用进行小程序页面授权,里面包含了用户点击取消的重新授权方案: //auth.js /* * @Author: Porco_Mar * @Date: 2018-04-11 15:49:55 * @Last...
  • 快速入门 WePY 小程序

    2018-10-24 15:37:04
    WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。 二、WePY 使用 1、WePY的安装或更新都通过npm进行: npm install -g wepy-cli //全局安装...
  • WePY小程序框架实战一】-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ... |-- pages |-- index.wpy ...
  • wepy小程序中使用 腾讯位置服务 --路线规划 踩坑、踩坑、踩坑、踩坑 1、报错没导进去 qqmapwx 一定要小写 import qqmapwx from ‘…/libs/qqmap-wx-jssdk.min.js’; 2、起点偏移问题 --起点不是定位点 获取...
  • wepy 小程序关闭 eslint

    2020-04-08 10:43:54
    ** 1.在文件夹内找到wepy.config.js ** 2. 找到eslint将其值改为false
  • wepy 小程序云开发

    2018-11-03 10:16:00
    小程序前段时间更新了云开发的功能,刚听到对时候觉得简直是个人开发者对福音,尤其是对我这样对后端不是很懂对前端傻傻,简直不能太方便,就试了下。 体验二维码: 源码:https://github.com/calamus0427/233 ...
  • wepy小程序分包的版本

    2019-12-03 10:24:29
    卸载之前已经下载过的版本 npm uninstall -g wepy-cli 安装特定版本 @1.7.2 npm install -g wepy-cli@1.7.2
  • // 声明一个App小程序实例 export default class MyAPP extends wepy.app { } // 声明一个Page页面实例 export default class IndexPage extends wepy.page { } // 声明一个Component组件实例 expor...
  • 12月4日boss通知,要求尽快把现有m站功能克隆一份到微信小程序,5日开始开发 - 9日基本完成,10日开始提测+改BUG,12月13日-发布到微信后台审核,12月14日开始写总结等发布,记录一下开发小程序的坑 ...
  • 只做了高德地图依据搜索地址滑动地图显示对应的建筑,在依据显示的建筑添加地址,搜索地址,显示对应的地址,再将对应的地址显示到地图上滑动
  • wepy小程序项目总结

    2018-05-09 22:03:22
    1. wepy 不能在computed中获取props对象内容,可以获取String,需使用setTimeout,不知为何 2. 项目中出现需求如所述: 点击灰色透明遮罩关闭遮罩层,点击白色区域的 “X” 也是关闭遮罩层 但是通过一般布局产生的...
  • Atom 完美支持WePY 小程序开发

    千次阅读 2018-02-22 16:37:38
    Atom-完美支持WePY 简介 为何使用WePY? ...我们都知道开发小程序的时候有很多很多的不方便的地方,譬如: ...小程序的组件化支持能力太弱 ...如果你还不了解如何开发小程序,可以先看下小程序开发简易教程。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,668
精华内容 667
关键字:

wepy小程序