精华内容
参与话题
问答
  • wepy

    2020-04-02 15:19:34
    效果: 代码: <style lang="less"> .userinfo-navigate { width: 280rpx; height: 80rpx; border: 1rpx solid red; } .userinfo { display: flex; flex-direction: column;......

    wepy开启使用promise

    在app.wpy中使API promise化

    export default class extends wepy.app {
    
        constructor () {
            super();
            this.use('promisify');
        }
    
    }

    使用:没加promise之前,res的值undefined

        async requestUrl() {
          let self = this;
          let time = util.getCurrentTime();
          let key = 'www.mall.cycle.com';
          let sign = md5.hex_md5((time + key).toLowerCase());
          let data = { sign: sign, time: time, page: 1, size: 10 };
          let url = 'http://api-mall.dyq086.cn/emall/api/mall/discoverList';
          let res = await wepy.request({
            url: url,
            method: 'GET',
            data: data,
            header: { 'Content-Type': 'application/json' },
            // success: function(res) {
            //   console.warn(res);
            //   return res;
            // }
          });
          console.warn('res=');
          console.warn(res);
        },

    分析:

    promise基本请求网络数据

        //注意:使用了promise,success回调方法无效

        requestBaseUrl() {
          let self = this;
          let url =
            'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=MA==&i=9';
          wepy
            .request({
              url: url,
              method: 'GET',
              // success: function(res) {
              //   console.warn(res);
              //   return res;
              // }
            })
            .then(d => console.log(d));
        },

    async-await-网络请求

      async requestBaseUrlAwait() {
        let self = this;
        let url = 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=MA==&i=9';
        let res = await wepy.request({
          url: url,
          method: 'GET'
        });
        console.warn(res.data);
        return res;
      }
      //结果
      //0

     

    async-await-没有resolve结果的情况

     // pomise对象
      async f1() {
        let self = this;
        await new Promise(resolve => {
          console.log(1);
        });
        console.log(2);
      }
    
      testAwaitNotReturn() {
        let self = this;
        self.f1();
        console.log(3);
      }
      //结果
      //2
      //3

     async-await-有resolve结果的情况

      async f2() {
        let self = this;
        await new Promise(resolve => {
          console.log(1);
          resolve();
        });
        console.log(2);
      }
    
      testAwaitReturn() {
        let self = this;
        self.f2();
        console.log(3);
      }
      //结果
      //2
      //3
      //1

    wepy例子

    效果:

    代码:

    <style lang="less">
    .userinfo-navigate {
      width: 280rpx;
      height: 80rpx;
      border: 1rpx solid red;
    }
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    </style>
    
    <template>
      <view class="container">
        <view class="userinfo-navigate" @tap="bindViewTap">{{ motto }}</view>
        <!-- 获取用户信息(头像/昵称) -->
        <view class="userinfo" @tap="handleViewTap">
          <image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"/>
          <view class="userinfo-nickname">{{ userInfo.nickName }}</view>
        </view>
        <view>
          <view class="title" slot="title">测试数据绑定</view>
          <text class="info">{{setTimeoutTitle}}</text>
          <text class="info">{{now}}</text>
          <button @tap="plus('a')" size="mini">  +1  </button>
          <text class="info">{{mynum}}</text>
        </view>
        <button @tap="toast" size="mini">第三方组件</button>
        <!-- 引入并使用第三方组件-提示框 -->
        <toast />
        <!-- 使用Panel组件中模板 -->
        <panel>
          <view class="title" slot="title">使用Panel组件中模板</view>
        </panel>
    
        <panel>
          <view class="title" slot="title">测试并发网络请求</view>
          <view>返回结果: <text>{{netrst}}</text></view>
          <button @tap="request" size="mini"> 点我发起10个请求 </button>
        </panel>
    
        <panel>
          <view class="title" slot="title">测试组件Repeat</view>
          <repeat for="{{groupList}}" index="index" item="item" key="key">
            <group :grouplist="item" :index="index"></group>
          </repeat>
        </panel> 
    
        <panel>
          <view class="title" slot="title">测试列表</view>
          <list></list>
        </panel>       
    </view>
    </template>
    
    <script>
    import wepy from 'wepy';
    import Toast from 'wepy-com-toast';
    import Panel from '@/components/panel'; // alias example
    import Group from '../components/group'
    import List from '../components/list' // aliasFields example
    //通过继承自wepy.page的类创建页面逻辑
    export default class One extends wepy.page {
      config = {
        navigationBarTitleText: 'two'
      }
      components = {
        panel: Panel,
        toast: Toast,
        group: Group,
        list: List,    
      }    
        //可用于页面模板绑定的数据
        data = {
          mynum: 20,
          motto: '跳转到index页面',
          userInfo: {},
          setTimeoutTitle: '标题三秒后会被修改',
          netrst: '',
          groupList: [
          {
            id: 1,
            name: '点击改变',
            list: [
            {
              childid: '1.1',
              childname: '子项,点我改变'
            }, {
              childid: '1.2',
              childname: '子项,点我改变'
            }, {
              childid: '1.3',
              childname: '子项,点我改变'
            }
            ]
          },
          {
            id: 2,
            name: '点击改变',
            list: [
            {
              childid: '2.1',
              childname: '子项,点我改变'
            }, {
              childid: '2.2',
              childname: '子项,点我改变'
            }, {
              childid: '2.3',
              childname: '子项,点我改变'
            }
            ]
          },
          {
            id: 3,
            name: '点击改变',
            list: [
            {
              childid: '3.1',
              childname: '子项,点我改变'
            }
            ]
          }
          ]      
        }        
    
        //事件处理函数(集中保存在methods对象中)
        methods = {
          plus () {
            this.mynum++
          },
          bindViewTap () {
            console.log('navigateTo index');
            wx.navigateTo
            ({
              url: '/pages/index'
            })
          },
            //使用第三方组件的提示框
            toast () 
            {
              let promise = this.$invoke('toast', 'show', 
              {
                title: '自定义标题',
                img: 'https://oimagec3.ydstatic.com/image?id=1298949196441763131&product=xue'
              })
              promise.then((e)=>
              {
                console.log('toast done img')
              })
            },
    
            request () {
              let self = this
              let i = 10
              let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ==']
              while (i--) {
                wepy.request({
                  url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
                  success: function (d) {
                    self.netrst += d.data + '.'
                    self.$apply()
                  }
                })
              }
            },
          };
    
          onLoad() {
            let self = this
          //获取用户信息
          this.$parent.getUserInfo(function (userInfo) {
            if (userInfo) {
              self.userInfo = userInfo
              // console.log(userInfo)
            }
            setTimeout(()=>{
              self.setTimeoutTitle = '到三秒了,新标题'
              self.$apply()
            },3000)
    
            self.$apply()
          })
        }
    
        computed = {
          now () {
            console.log('computed-now');
            return +new Date()
          }
        }
      }
      </script>

     

    展开全文
  • WePY 2 (beta) 介绍 WePY 资源汇总:awesome-wepy WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,...
  • wepy-plugin-autopages 使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages。 注意:该插件只会对编译文件...
  • <ul><li>Platform: wepy</li><li>Platform version: 2.0</li><li>Wechat version: 2.10.2</li><li>weapp-qrcode version: 1.0</li><li>other version: [如果在某一设备下出现该问题,请填写设备号]</li></ul> ...
  • wepy 是一个小程序组件化开发框架。 组件 小程序支持js模块化,但彼此独立,业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap="myclick",模板B中同样绑定...
  • 微信小程序-wepy-侧滑删除组件,支持自定义内容区在最近的微信小程序开发过程中需要用到侧滑删除的功能,微信小程序官方是没有提供这样的组件,再加上我们的微信小程序使用的是wepy组件开发框架开发的,wepy也没有...
  • # wepy init standard ``` $ wepy init standard Generate project in current directory? Yes downloading template wepy-cli · Failed to download repo standard: Hostname/IP does not match certificate...
  • 由于将<code>export default class Popup extends wepy.component写成<code>export default class Popup extends wepy.page导致组件属性传值不能正常使用 吐槽 在使用wepy版本的popup的过程中,发现怎么设置显示位置...
  • wepy封装wepy.request

    2020-06-14 16:07:12
    import wepy from 'wepy' const baseURL = '根路径' wepy.get = function (url, method, data = {}) { return wepy.request({ url: baseURL + url, method, data }) }
    import wepy from 'wepy'
    
    const baseURL = '根路径'
    
    wepy.get = function (url, method, data = {}) {
      return wepy.request({
        url: baseURL + url,
        method,
        data
      })
    }
    
    展开全文
  • WePY1 vs WePY2

    2020-04-13 09:50:04
    1、什么是WePY 微信小程序组件化开发框架WePY。将 Web App 和小程序进行对比。Web App 和小程序在功能上类似, Web App 在开发的时候,可能使用 Vue.js 作为其核心库,用 Webpack 进行打包。在微信小程序中,大家...

     

    1、什么是WePY

    微信小程序组件化开发框架WePY。将 Web App 和小程序进行对比。Web App 和小程序在功能上类似, Web App 在开发的时候,可能使用 Vue.js 作为其核心库,用 Webpack 进行打包。在微信小程序中,大家可以简单的将 WePY 理解为 Web App 里的 Vue.js + Webpack 的合体。

     

    官方介绍:

    WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份, 是小程序最早的框架之一,是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

     

    其他框架:Taro、uni-app、mpvue....

     

    2、WePY1 vs WePY2

     

    1.入口申请调整

    WePY 1 使用类的继承方式 export default class MyPage extends wepy.page {}

     

    WePY 2 中调整为 wepy.page({})。将实例化的过程放在生命周期事件中。

    在 WePY2 的环境当中,每个 WePY2 页面拥有独自的 WepyPage 实例。小程序也会有 WepyApp 实例。它们并非是继承自原生的 Page 和 App。WePY 提供 wepy.app,wepy.page,wepy.component 等入口 方法注册程序、页面、以及组件。注册后在组件的生命周期事件(onLaunch/onLoad/created)里,会自动创建相对应的 WePY 实例。

     

    2.数据绑定机制调整

    WePY 1 使用脏检查进行数据绑定,在异步函数中更新数据的时,必须手动调用$apply方法 WePY 2 中使用了 Vue Observer 实现数据绑定,不需要使用$apply()。

     

    Vue Observer:https://segmentfault.com/a/1190000008377887?utm_source=tag-newest

     

     

    3.避免文件编译时出现的问题

    WePY 1 是通过文件编译创建的静态组件在动态循环遍历时会出现一些问题:

    组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例,目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去用 props, computed, watch 等等特性。

    WePY 2直接基于的小程序原生的组件去实现,避免了这一类问题。

     

     

    4.Vue 模板语法

    WePY 1 使用wxml来写 template

    WePY 2中推荐使用 html 代替 wxml 来写 template,支持除 filter 之外的所有 Vue 模板语法。

     

     

    5.编译方式改变

    WePY 1 默认使用babel编译,基于文件编译

    WePY 2 从基于文件编译调整为基于入口编译,对于图片等静态资源需要指定 static 选项 。

     

    babel:https://www.babeljs.cn/docs/

     

    6.组件引用方式

    WePY 1 使用 import 的方式导入

    WePY 2 中使用原生的 usingComponents 方式

     

     

    7.单文件组成

    WePY 1 : <script>,<template>,<style>

    WePY 2 : <script>,<template>,<style>,<config>

     

    8.二者不兼容

    需要注意的是,WePY 1 的 cli 工具和 WePY 2 的 cli 工具并不能兼容和共存, WePY 1 的 cli 工具无法编译 WePY 2 的项目,同理 WePY 2 的 cli 工具也无法编译 WePY 1 的项目。在使用 npm 的 --global 参数安装时,将会进行版本覆盖。

     

     

    3、其他

    文档:

    https://wepyjs.github.io/wepy-docs/1.x/

    https://wepyjs.github.io/wepy-docs/2.x/#/

     

    4、uni-app

    uni-app 使用vue的语法+小程序的标签和API。

     

    文档:https://uniapp.dcloud.io/README

     

    开发注意:

    1、单文件模式;

    2、组件标签靠近小程序 <view></view> ....;

    3、接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni;

    4、为兼容多端运行,建议使用flex布局进行开发;

    5、页面样式:早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx ;

    6、目录结构:

    ┌─components uni-app组件目录

    │ └─comp-a.vue 可复用的a组件

    ├─hybrid 存放本地网页的目录

    ├─platforms 存放各平台专用页面的目录

    ├─pages 业务页面文件存放的目录

    │ ├─index

    │ │ └─index.vue index页面

    │ └─list

    │ └─list.vue list页面

    ├─static 存放应用引用静态资源(如图片、视频等)的目录,

    注意:静态资源只能存放于此

    ├─wxcomponents 存放小程序组件的目录

    ├─main.js Vue初始化入口文件

    ├─App.vue 应用配置,用来配置App全局样式以及监听

    ├─manifest.json 配置应用名称、appid、logo、版本等打包信息

    └─pages.json 配置页面路由、导航条、选项卡等页面类信息

     

    7、生命周期

    应用生命周期,只可在App.vue中监听,常用函数:

    onLaunch

    当uni-app 初始化完成时触发(全局只触发一次)

    onShow

    当 uni-app 启动,或从后台进入前台显示

    onHide

    当 uni-app 从前台进入后台

    onError

    当 uni-app 报错时触发

    页面生命周期,常用:

    onLoad

    监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)

    onShow

    监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面

    onReady

    监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发

    onHide

    监听页面隐藏

    onUnload

    监听页面卸载

    展开全文
  • <p>wepy2 + towxml3 问题: <p><img alt="image" src="https://img-blog.csdnimg.cn/img_convert/d5862a6a3e4bb9ddf5d8df59a8d2e548.png" /></p> 定位: 经过拆解看到问题是 <code>md.use</code> ...
  • wepy小程序开发视频

    2020-08-26 11:55:08
    一个很不错的wepy小程序教学视频,从构建构建到项目运行都是很完整,很适合刚接触wepy开发的朋友.视频+源码,不要错过这样的干货。下载txt文件下来,里面直接链接就可以下载。
  • <div><p>...这个不知道是wepy的问题还是 WxValidate 的问题</p><p>该提问来源于开源项目:wux-weapp/wx-extend</p></div>
  • wepy快速入门

    千次阅读 2019-05-13 10:12:01
    Github地址 wepy官网:https://tencent.github.io/wepy/index.html 安装 wepy 命令行工具 npm install wepy-cli -g 在开发目录生成开发DEMO ...npm install -g wepy-cli //全局安装或更新WePY命令行工...

    Github地址

    wepy官网:https://tencent.github.io/wepy/index.html

    安装 wepy 命令行工具

    npm install wepy-cli -g
    

    在开发目录生成开发DEMO

    wepy new myproject
    

    开发实时编译

    wepy build --watch
    
    npm install -g wepy-cli  //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli
    wepy -v //查看wepy-cli版本
    wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的版本使用:wepy new myproject
    wepy list //查看项目模板
    cd <projectName> //切换至项目目录
    npm  install //安装依赖
    wepy build --watch //开启实时编译
    

    在这里插入图片描述
    WePY项目的目录结构

    ├── dist                   小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
    ├── node_modules           
    ├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
    |   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
    |   |   ├── com_a.wpy      可复用的WePY组件a
    |   |   └── com_b.wpy      可复用的WePY组件b
    |   ├── pages              WePY页面目录(属于完整页面)
    |   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
    |   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
    |   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
    └── package.json           项目的package配置
    

    在这里插入图片描述

    project.config.json文件内容如下:

    {
      "description": "project description",
      "setting": {
        "urlCheck": true,
        "es6": false,
        "postcss": false,
        "minified": false
      },
      "compileType": "miniprogram",
      "appid": "touristappid",
      "projectname": "Project name",
      "miniprogramRoot": "./dist"
    }
    

    es6: 对应关闭ES6转ES5选项,关闭。 重要:未关闭会运行报错。

    postcss: 对应关闭上传代码时样式自动补全选项,关闭。 重要:某些情况下漏掉此项也会运行报错。

    minified: 对应关闭代码压缩上传选项,关闭。重要:开启后,会导致真机computed, props.sync 等等属性失效。

    urlCheck: 对应不检查安全域名选项,开启。 如果已配置好安全域名则建议关闭。

    展开全文
  • wepy框架入门

    千次阅读 2019-05-18 11:44:58
    安装 wepy 命令行工具。 npm install wepy-cli -g 在开发目录生成开发DEMO。 wepy new myproject 开发实时编译。 wepy build --watch 项目目录结构 dist node_modules src components com_a.wpy com...
  • wepy使用

    2020-05-20 11:46:36
    wepy框架的安装和使用 安装命令 npm install wepy-cli -g 创建wepy项目 wepy项目与小程序项目的关系 实时编译wepy项目 wepy项目目录结构 加载并配置wepy项目 .wpy文件使用说明 lang和src属性 配置代码高亮 ...
  • Wepy 框架支持下

    2020-12-01 12:19:12
    <div><p>Wepy 框架支持下</p><p>该提问来源于开源项目:jasondu/wxa-plugin-canvas</p></div>
  • WePY 框架

    2020-02-13 20:29:14
    1. 什么是 WePY WePY 是 腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装,更贴近于MVVM 架构模式,并支持 ES6 / 7 的一些新特性,同时语法风格更接近于Vue.js ,使用 WePY 框架能够...
  • WePY使用

    2020-04-06 21:37:26
    一、WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。 二、WePY 使用 1、WePY的安装或更新都通过npm进行: npm install -g wepy-cli //...
  • 基于微信小程序canvas开发的图表控件,适用于wepy框架 > 暂时只有折线图,后续提供更多的图表 使用 安装组件 npm install wepy-com-charts --save 引用组件 import wepy from 'wepy'; import Charts from '...

空空如也

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

wepy