精华内容
下载资源
问答
  • 2021-04-08 17:15:35

    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支持值
    stylecsscsslessscssstyluspostcss
    templatewxmlwxmlxmlpug(原jade)
    scriptbabelbabelTypeScript
    • 案例代码
    <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页面渲染数据对象,存放可用于页面模板绑定的渲染数据
    methodswxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtapbindchange
    eventsWePY组件事件处理函数对象,存放响应组件之间通过$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之动态控制类名的具体实现方法,供大家参考,具体内容如下 控制类名 style <style lang=less scoped> .liBkgCor { background-color: red; } </style> template...
  • wepy-prop-types wepy属性类型检测插件 第一步:keycap_1: 工程目录下运行 npm install --save wepy-prop-types 如果你已经安装了yarn,可运行 yarn add wepy-prop-types 第二部使用:keycap_2: 在工程中导入: ...
  • wepy小程序开发视频

    2020-08-26 11:55:08
    一个很不错的wepy小程序教学视频,从构建构建到项目运行都是很完整,很适合刚接触wepy开发的朋友.视频+源码,不要错过这样的干货。下载txt文件下来,里面直接链接就可以下载。
  • 分析源码之前,我们先来回顾一下,wepy 的使用: <!-- 小程序入口 app.wpy --> [removed] import wepy from 'wepy'; export default class extends wepy.app { ...... } [removed] 让我们一起看看 export ...
  • wepy weui 框架代码片段 说明 wepy weui代码片段 vscode 插件搜索 wepy snippets 代码片段关键词 wepy 将 wpy 文件格式设置为 vue,vue-html,html 支持 javascript,typescript NodeJs 构建 模块化构建代码片段 npm ...
  • 主要介绍了详解wepy开发小程序踩过的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 对于手写签名组件组件晚上有很多种写法,我选择了一种进行了wepy的框架的改造。如果使用wepy框架做手写签名的话可以直接复制下面的代码。 这里需要提醒的是:安卓手机和苹果手机有适配性的问题,苹果手机在签名的...
  • wepy to uni-app 输入wepy项目路径,输出uni-app项目。 注意:本工具基于语法转换,对于wepy自带的方法暂不支持转换,又如引用了redux也暂不支持,牵扯太多。转换项目仅供参考。 安装 $ npm install wepy-to-uniapp ...
  • 主要介绍了微信小程序 wepy框架与iview-weapp的用法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了详解微信小程序框架wepy踩坑记录(与vue对比),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • wepy-demo 小程序wepy框架学习demo 安装(更新) wepy 命令行工具。 npm install wepy-cli -g 生成开发示例 wepy init standard myproject 安装依赖 cd myproject npm install 开发实时编译 npm run dev (wepy build...
  • shop-wepy:商城(小程序)

    2021-05-15 10:58:33
    WeUI in WePY 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 这里是 WeUI 在 WePY 中的使用示例。 预览 体验步骤 1. 安装 wepy 本...
  • wepy-plugin-autopages 使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages。 注意:该插件只会对编译文件...
  • 前言 终于要开始做小程序了,领导给了一周时间做小程序了解和技术调研。我也是从零开始接触小程序,而且也早就听过mpvue这个小程序框架,决定花两天时间熟悉小程序,然后上手mpvue。 第一天   首先撸完小程序的...
  • 以下安装都通过npm安装安装wepy命令行工具在开发目录生成开发DEMO开发实时编译项目目录结构使用微信开发者工具新建项目,本地开发选择dist目录。微信开发者工具-->项目-->关闭ES6转ES5。本地项目根目录运行...
  • 一、微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在开发过程中参考了 Vue...
  • wepy-books 用wepy做的图书借阅系统 功能说明 主页展示(轮播图,借阅排名,今日推荐) 分类书籍 个人中心 搜索书籍 书籍详情 书包(购物车) 收藏,借阅,我的消息 智能客服 体验步骤 1. 安装 wepy 本项目基于wepy开发, ...
  • Wepy-Redux 微信小程序wepy框架接入 Redux 状态管理 项目运行 cd Wepy-Redux npm install npm run dev / wepy build --watch
  • 基于微信小程序canvas开发的图表控件,适用于wepy框架 > 暂时只有折线图,后续提供更多的图表 使用 安装组件 npm install wepy-com-charts --save 引用组件 import wepy from 'wepy'; import Charts from '...
  • 安装(更新) wepy 命令行工具。 yarn: yarn global add wepy-cli npm: npm i wepy-cli -g 安装依赖包 yarn / npm install 开发实时编译。 yarn dev / npm run dev 生产压缩 yarn build / npm run build //上传...
  • wepy-weui-demo import weui in wepy 说明文档:
  • 基于 wepy 开发的一款记账微信小程序 后端也开源啦!!感谢支持 体验二维码 功能 日常记账,目前只支持基本的收入、支出、转账 预算管理功能 搜索功能 消费报表 每月统计报表 首页看板自定义 根据日历查看消费 资产...
  • 微信小程序 WePy Utils 微信小程序 WePy 工具集整合并封装了常用的小程序 API 和 HTTP Request 安装 npm install wepy-utils 按需引入 import { UTILS, HTTP, TIPS } from 'wepy-utils' Utils UTILS.now() 获取当前...
  • 主要介绍了小程序第三方框架对比 ( wepy / mpvue / taro ) 分析,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • WePY项目试水

    2019-08-10 07:12:21
    WePY项目试水

空空如也

空空如也

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

wepy