精华内容
下载资源
问答
  • WePY

    2021-04-08 17:15:35
    WePY 一、WePY 简介 001 - 什么是 WePY WePY 是腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装 002 - 为什么使用 WePY WePY 相比于原生小程序开发,拥有众多的开发特性和优化方案...

    WePY


    一、WePY 简介
    001 - 什么是 WePY

    WePY 是腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装

    002 - 为什么使用 WePY

    WePY 相比于原生小程序开发,拥有众多的开发特性和优化方案,

    • 开发风格接近于 Vue.js,支持很多vue中的语法特性;
    • 通过 polyfill 让小程序完美支持 Promise;
    • 可以使用ES6等诸多高级语法特性,简化代码,提高开发效率;
    • 对小程序本身的性能做出了进一步的优化;
    • 支持第三方的 npm 资源;
    • 支持多种插件处理和编译器;
    二、WePy 的安装与运行
    001 - 安装 WePY
    • WePY 的安装或更新都通过 npm 进行全局安装
    npm install wepy-cli -g
    
    002 - 初始化 WePY 项目
    • 使用命令行方式进行初始化项目结构
    wepy init standard myproject
    
    • wepy init” – 是固定写法,代表要初始化 wepy 项目;
    • standard” – 代表模板类型为标准模板,可以运行 ”wepy list” 命令查看所有可用的项目模板
    • myproject” – 为自定义的项目名称。
    • Project name () :项目的名字可以更改,如果不修改直接回车即可
    • AppId (touristappid):输入自己小程序的Appid
    • Project description:项目的描述,直接回车即可
    • Author (lfs):项目作者,直接回车
    • Use ESLint to lint your code? (Y/n):真正开发的时候建议开启,现在学习阶段,先不开启
    • Use Redux in your project?:是否使用Redux框架语法,目录会多出store目录,no
    • Use web transform feature in your project?:是否开启web转换,no
    003 - 运行编译 WePY 项目
    • 运行 cd myproject 切换至 `WePY`` 项目根目录
    • 运行 npm install 安装 WePY 项目依赖项
    • 运行 wepy build --watch 开启实时编译
      • wepy build --watch 命令,会循环监听 WePY项目中源代码的变化,自动编译生成小程序项目

    注意:生成的小程序项目默认被存放于 dist 目录中。

    004 - 认识WePY 项目目录

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWsggPF0-1617873323123)(./images/4projectlist.png)]

    004 - 将 WePy 项目导入到开发者工具中
    • 1.7.0 版本之后的 wepy-cli 工具生成的项目根目录下,包含 project.config.json 文件,
      • 记录了项目的基本配置信息,例如:项目的名称、appId、生成的小程序项目根路径等。
    • 如果项目中存在 project.config.json 文件,
      • 使用 微信开发者工具 --> 导入项目,”项目目录”请选择 wepy 项目根目录,
      • 会根据 project.config.json 文件的配置,把 wepy编译生成的小程序项目加载到微信开发者工具中。
    005 - WePY 和 小程序项目的关系
    • 通过 wepy init 命令初始化的wepy 项目,实际是一个模板项目,不能直接当作小程序运行。
    • 需要运行相关的命令,把模板项目编译为小程序项目,才可以运行。

     和 小程序项目的关系


    三、WePY 文件介绍
    001 - 介绍.wpy文件的组成部分
    • 一个 .wpy 文件可分为三大部分,各自对应于一个标签:
      • 脚本部分,即 <script></script> 标签中的内容,又可分为两个部分:
        • 逻辑部分,除了 config 对象之外的部分,对应于原生的 .js 文件
        • 配置部分,即 config 对象,对应于原生的 .json 文件
      • 结构部分,即 <template></template> 模板部分,对应于原生的 .wxml 文件。
      • 样式部分,即<style></style>样式部分,对应于原生的 .wxss 文件。
    • 其中,小程序入口文件 app.wpy 不需要 template,所以编译时会被忽略。
    002 - .wpy 文件的使用说明
    • .wpy 文件中的 scripttemplatestyle 这三个标签都支持 langsrc 属性,

      • lang 决定了其代码编译过程,
      • src 决定是否外联代码,存在 src 属性且有效时,会忽略内联代码。
    • 语法属性

    标签 lang默认值 lang支持值
    style css csslessscssstyluspostcss
    template wxml wxmlxmlpug(原jade)
    script babel babelTypeScript
    • 案例代码
    <style lang="less" src="page1.less"></style>
    <template lang="wxml" src="page1.wxml"></template>
    <script>
        // some code
    </script>
    
    003 - 小程序入口 app.wpy

    入口文件 app.wpy 中所声明的小程序实例继承自 wepy.app 类,包含一个 config 属性和其它全局属性、方法、事件。

    • config 属性会被编译为小程序的 app.json 全局配置文件;
    • config 属性之外的其它节点,会被编译为小程序的 app.js 文件;
    • style 标签会被编译为小程序的 app.wxss 全局样式;
    004 - app.wpy 全局配置小程序外观

    在小程序的入口文件中找到 window 节点:app.wpy -> script标签 -> config -> window 即可全局配置小程序的外观

    window: {
      backgroundTextStyle: 'dark',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '小程序电商项目',
      navigationBarTextStyle: 'black'
    }
    
    005 - 页面 .wpy 文件中 script 标签组成结构

    页面文件 page.wpy 中所声明的页面实例继承自 wepy.page

    属性 说明
    config 页面配置对象,对应于原生的page.json文件,类似于app.wpy中的config
    components 页面组件列表对象,声明页面所引入的组件列表
    data 页面渲染数据对象,存放可用于页面模板绑定的渲染数据
    methods wxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtapbindchange
    events WePY组件事件处理函数对象,存放响应组件之间通过$broadcast$emit$invoke所传递的事件的函数
    其它 小程序页面生命周期函数,如onLoadonReady等,以及其它自定义的方法与属性
    四、 WePY 框架开发规范与使用
    001 - 如何设置默认首页
    • 打开 src -> app.wpy 入口文件,将新创建的页面路径,注册到 config -> pages 数组中,并调整为数组的第一项即可
    pages: [
      'pages/home',
      'pages/index'
    ],
    
    002 - 创建页面的注意事项
    • 每个页面的 script 标签中,必须导入 wepy 模块,并创建继承自 wepy.page 的页面类;否则会报错。
    • 每个页面的路径,必须记录到 app.wpyconfig -> pages 数组中。
    • 页面路径记录完毕之后,必须再回到页面文件中,摁下 Ctrl + S 快捷键重新编译生成页面,否则会报错。
    003 - 页面绑定事件以及传参

    wepy 框架中,优化了事件绑定机制,支持类似于 Vue.js的事件绑定语法

    • WePY 中,统一使用 @ 绑定事件,传递参数直接采用@tap='handle({{params}})'传递
    • 案例代码
    <button type='warn' @tap='handle({{age}})'>WePY 绑定事件</button>
    
    data = {
      age: 18
    }
    
    methods = {
      handle: function (params) {
        console.log('触发函数')
        console.log(params)
      }
    }
    
    004 - 页面绑定事件的注意事项

    通过 @ 符号绑定的事件处理函数,必须定义到页面的 methods 节点下。

    • WePY 中的 methods 属性只能声明页面 wxml 标签的事件处理函数,不能声明自定义方法,
    • 自定义方法需要声明到和 methods 平级的节点位置,这与 Vue 中的用法是不一致的。
    data = {
      age: 18
    }
    
    methods = {
      handle: function (params) {
        console.log('触发函数')
        console.log(params)
    
        this.add()
      }
    }
    
    add () {
      console.log('自定义事件')
    }
    
    005 - 页面以及文本框数据绑定
    • .wpy 页面中的私有数据,需要定义到 data 节点中,页面上使用双大括号语法 {{ }} 渲染 data 中的数据
    • 文本框与 data 做双向数据绑定需要定义事件
    • 案例代码
    <view>{{ age }}</view>
    <input type="text" @input='inputHandle' value="{{ val }}" />
    
    data = {
      age: 18,
      val: ''
    }
    
    methods = {
      inputHandle: function (e) {
        console.log(e.detail.value)
        this.val = e.detail.value
      }
    }
    
    006 - wxs 脚本的使用
    • wxs 脚本定义为外联文件,并且后缀名为 .wxs
    • <script></script> 标签内,通过 import 导入相对路径的 wxs 模块
    • 在当前页面的 class 类中,通过 wxs = { } 注册刚才导入的 wxs 模块
    • 案例代码
    <view>{{ homeData.a }}</view>
    
    import homeWxs from '../wxs/home.wxs'
    
    export default class Home extends wepy.page {
      wxs = {
        homeData: homeWxs
      }
    }
    
    007 - 配置 promisify 启用 asyncawait
    • 默认使用 wepy-cli 创建的项目,不支持使用 ES7asyncawait 来简化 Promise API 的调用。
    • 需要手动开启此功能:打开 src -> app.wpy,找到 constructor() 构造函数,在构造函数中代码的最后一行,添加 this.use(‘promisify’)
    constructor () {
      super()
      this.use('requestfix')
      this.use('promisify')
    }
    
    008 - WePY 发送 getpost 请求

    WePY 框架对原生小程序做了封装,之前通过 wx 调用的 API,都可以直接使用 wepy 进行调用

    // wepy 发送 Get 请求
    
    async getInfo () {
      const res = await wepy.request('https://www.liulongbin.top:8082/api/get')
      
      console.log(res)
    }
    
    // wepy 发送 Post 请求
    
    async getInfo () {
      const res = await wepy.request({
        url: 'https://www.liulongbin.top:8082/api/post',
        method: 'post',
        data: {
          name: 'loong'
        }
      })
      
      console.log(res)
    }
    
    009 - 异步更新数据

    在异步函数中更新数据的时候,页面检测不到数据的变化,必须手动调用 this.$apply 方法。

    作用是强制页面重新渲染

     // 被 async 修饰的函数叫做异步函数
    
    async getInfo() {
      const res = await wepy.request('接口地址’)
      this.getMsg = res.data
      this.$apply()
    }
    
    
    展开全文
  • wepy

    2019-04-22 11:01:53
    官网网址 https://tencent.github.io/wepy/document.html#/ ...wepy init standard wepy-first-app # 初始化一个项目 cd wepy-first-app # 进入目录 npm i # 安装依赖项 wepy build --watch # 进行项目编译 # 使...

    官网网址

    https://tencent.github.io/wepy/document.html#/

    打开方式

    npm install wepy-cli -g # 安装
    wepy init standard wepy-first-app # 初始化一个项目
    cd wepy-first-app # 进入目录
    npm i # 安装依赖项
    wepy build --watch # 进行项目编译
    # 使用微信开发者工具导入项目目录中的dist文件夹即可
    # 需要注意把详情设置中的es6转es5选项去掉钩
    

    使用 wepy 安装下载其他模板进行开发

    wepy list # 列出所有可用的模板
    wepy init 模板名字 项目名字 # 使用指定的模板创建项目
    
    展开全文
  • 分析源码之前,我们先来回顾一下,wepy 的使用: <!-- 小程序入口 app.wpy --> [removed] import wepy from 'wepy'; export default class extends wepy.app { ...... } [removed] 让我们一起看看 export ...
  • wepy-project 用服务端node + wepy 前端 wepy 搭建的一个社区博客项目
  • wepy_ 小程序模板wepy git clone 拷贝下来后,建议另存一份,然后可以修改代码练习。 npm isntall 安装依赖 wepy build --wacth 编译检测
  • 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
      })
    }
    
    展开全文
  • wepy-cli wepy-cli基于wepy2.0,在官方脚手架上进行二次封装及改造 使用 下载 git clone xxx 安装依赖 npm install 启动 npm run dev 生成weapp文件夹后请使用小程序开发者工具导入此文件夹预览. 项目架构目录 wepy-...
  • wepy-demo 小程序wepy框架学习demo 安装(更新) wepy 命令行工具。 npm install wepy-cli -g 生成开发示例 wepy init standard myproject 安装依赖 cd myproject npm install 开发实时编译 npm run dev (wepy build...
  • 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

    监听页面卸载

    展开全文
  • Iview-in-Wepy wepy with iview 本项目仅供参考,如有疑问欢迎提issue,我会尽力解决。 wepy 1.7.3 使用方法 1、clone本项目 2、执行 npm i wepy build -w 3、在小程序开发工具内新建小程序,并将目录指向dist目录 ...
  • WePY项目试水

    2019-08-10 07:12:21
    WePY项目试水
  • wepy-weui-demo import weui in wepy 说明文档:
  • WePY使用

    2020-04-06 21:37:26
    一、WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。 二、WePY 使用 1、WePY的安装或更新都通过npm进行: npm install -g wepy-cli //...
  • WePY 2 (beta) 介绍 WePY 资源汇总:awesome-wepy WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,...
  • wepy-prop-types wepy属性类型检测插件 第一步:keycap_1: 工程目录下运行 npm install --save wepy-prop-types 如果你已经安装了yarn,可运行 yarn add wepy-prop-types 第二部使用:keycap_2: 在工程中导入: ...
  • 基于 WePY,以 Web 前端的开发风格开发微信小程序。 链接 使用 # 安装 wepy-cli $ npm install wepy-cli -g # 下载代码 $ git clone https://github.com/zhaotoday/wepy.git # 安装依赖包 $ npm install # 实时编译 ...
  • WePY 框架

    2020-02-13 20:29:14
    1. 什么是 WePY WePY 是 腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装,更贴近于MVVM 架构模式,并支持 ES6 / 7 的一些新特性,同时语法风格更接近于Vue.js ,使用 WePY 框架能够...
  • Wepy-Redux 微信小程序wepy框架接入 Redux 状态管理 项目运行 cd Wepy-Redux npm install npm run dev / wepy build --watch
  • wepy入门

    2019-08-03 18:13:24
    npm install @wepy/cli -g #全局安装WePY CLI工具 生成开发示例 wepy init standard myproject #使用standard模板初始化项目 安装依赖 cd myproject #进入到项目目录 npm install #安装项目依赖包 开发实时编译 ...
  • wepy-automation 感谢, 项目描述 fly.js拦截器 多环境参数配置 相关文章: 部署说明 安装环境 # 安装(更新) wepy 命令行工具。 cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译。 npm run ...

空空如也

空空如也

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

wepy