精华内容
下载资源
问答
  •  1、安装wepy脚手架  npm install wepy-cli -g   2、查看wepy版本(出现版本号说明wepy脚手架安装成功)  wepy -v  3、如果脚手架为1.70版本以上,可以先查看项目模板  wepy list    4、创建项目模板  ①...
  • wepy框架入门教程

    千次阅读 2019-05-27 16:57:05
    wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 ###1:安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要...

    文档


    ###1:安装node

    端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。


    安装成功之后显示如下,查看版本,安装成功。

    ###2:安装全局淘宝npm镜像

    进入D盘(当然可以根据你自己的选择来安装路径)全局安装镜像。由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
    淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

    输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    

    安装成功之后显示如下,查看版本,安装成功。

    ###3:全局安装或更新WePY命令行工具

    npm install wepy-cli -g
    

    ###4:初始化一个项目myproject
    注意版本,因为我的版本是1.7.3的
    1.7.0之后的版本使用 wepy init standard myproject 初始化项目

    wepy init standard myproject
    

    暂时可以一路回车,后续如果遇到要做具体的项目的时候,可以根据项目需要填写。

    打开d盘,可以看见初始化的项目

    目录结构

    ├── 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配置
    

    ###5:进入myproject

    cd myproject
    

    ###6:安装依赖
    在新建的项目里面安装需要的依赖包

    npm  install
    

    安装完成之后可以看见,文件里面多出了两个依赖文件

    ###7:进行实时编译

    wepy build --watch
    

    ###8:在微信开发者工具打开
    可以看到,刚才创建的项目

    注意:因为小程序开发工具对wepy文件不太友好,无法直接在开发者工具里面打开,所以要另外选择编辑器编写代码,开发者工具可进行调试和查看效果

    ps:简书写文章的一个缺陷,就是有时候在上传markdown图片的过程中不能继续使用键盘,等图片上传好之后才可以,不然通篇文章都会消失,进入顶部重新编辑,遇到过两三次,编辑好的文章就这样消失了,头疼,只好又开始重新写一遍,权当是加深印象咯。

    原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。

    展开全文
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 1:安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要...

    文档


    1:安装node

    端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

     

    安装成功之后显示如下,查看版本,安装成功。

    2:安装全局淘宝npm镜像

    进入D盘(当然可以根据你自己的选择来安装路径)全局安装镜像。由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
    淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

    输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    

    安装成功之后显示如下,查看版本,安装成功。

     

    3:全局安装或更新WePY命令行工具

    npm install wepy-cli -g
    

    4:初始化一个项目myproject

    注意版本,因为我的版本是1.7.3的
    1.7.0之后的版本使用 wepy init standard myproject 初始化项目

    wepy init standard myproject
    

    暂时可以一路回车,后续如果遇到要做具体的项目的时候,可以根据项目需要填写。

     

    打开d盘,可以看见初始化的项目

     

    目录结构

    ├── 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配置
    

    5:进入myproject

    cd myproject
    

    6:安装依赖

    在新建的项目里面安装需要的依赖包

    npm  install
    

    安装完成之后可以看见,文件里面多出了两个依赖文件

     

    7:进行实时编译

    wepy build --watch
    

    8:在微信开发者工具打开

    可以看到,刚才创建的项目

     

    注意:因为小程序开发工具对wepy文件不太友好,无法直接在开发者工具里面打开,所以要另外选择编辑器编写代码,开发者工具可进行调试和查看效果

     

    ps:简书写文章的一个缺陷,就是有时候在上传markdown图片的过程中不能继续使用键盘,等图片上传好之后才可以,不然通篇文章都会消失,进入顶部重新编辑,遇到过两三次,编辑好的文章就这样消失了,头疼,只好又开始重新写一遍,权当是加深印象咯。

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

    展开全文
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 在之前,已经准备好几个源码 现在要运用的是wepy仿微信聊天界面 多看看源码,然后动手做一下 差不多就可以了解一二了 查看并运行源码-wepy仿微信聊天...
        

    文档


    在之前,已经准备好几个源码
    现在要运用的是wepy仿微信聊天界面
    多看看源码,然后动手做一下
    差不多就可以了解一二了
    查看并运行源码-wepy仿微信聊天界面
    https://github.com/wepyjs/wepy-wechat-demo

    接上篇,安装好运行环境之后。

    1:下载github上的源码到本地


    5640239-496f019a81c3fc69.png

    2:使用git工具或者cmd进入项目目录
    安装相关依赖

    npm install
    

    我通常会使用cnpm install,原因之前也一直再说


    5640239-acfc58f8d9b7f53b.png

    3:编译源代码

    wepy build
    
    5640239-78181895bf0a9a52.png

    4:在微信开发者工具之中打开
    可以看到这个源码运行的效果


    5640239-f3fd6c5e09f5a524.png

    5:源码是用来借鉴和参考的,可以帮助我们更近一步的对这个框架和知识点的了解应用,好了,又有事情可以做了,研究一下前端大神都是怎么写代码的。

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。

    展开全文
  • wepy:搭建小程序教程(一)

    千次阅读 2019-04-28 12:09:24
    1.在使用wepy搭建小程序前必须全局安装wepy包,使用 npm install wepy-cli-g 2.在下图可以看到创建一个wepy的命令是wepy new myproject(以前的办法), 现在统一创建使用的命令为wepy init standard myproject ...

    1.在使用wepy搭建小程序前必须全局安装wepy包,使用 npm install wepy-cli-g

    2.在下图可以看到创建一个wepy的命令是wepy new myproject(以前的办法),

      现在统一创建使用的命令为wepy init standard myproject

     

     3.创建的时候我们会需要输入这个信息,如下图

     第一个我们可以直接回车默认

    第二个为项目名(可直接回车默认)

    第三个是你的微信小程序的appid (注:如果直接回车默认那么微信开发工具会运行不了,提示你更改为正确的appid)

    第四个是项目描述(可直接回车默认)

    第五个创建人(可直接回车默认)

    第六个是否使用eslint对代码格式进行效验 (直接回车为yes,可手动输入 y or n)

    第七个为是否使用redux框架语法,选择yes生成的项目目录会多出store目录,这里我先暂时选择no

    第八个为是否生成index.template.html(一般直接回车默认,忽略不计)

    4.然后我们的demo就算创建好了,先 npm install 安装依赖包,发现有些后期需要的包不存在,先手动安装,使用npm下载后期需要的包

    npm install wepy-ant@1.5.10 -save
    npm install wepy-web --save
    npm install moment --save
    npm install wepy-plugin-imagemin --save-dev
    npm install wepy-plugin-uglifyjs --save-dev

    大概介绍一下,比如wepy-ant是一个支付宝小程序的适配器,实现了一套和微信小程序wepy几乎一样的wepy接口,用于同构支付宝小程序和微信小程序, 相同的wepy-web也是相同的作用,moment主要用于时间格式的相互转化 wepy-plugin-imagemin主要用于图片压缩,wepy-plugin-uglifyjs压缩插件

    5.项目的基本配置就算搭好了还有最后一个重要的一点,使用promise必须安装

    npm install wepy-async-function --save

    并且在app.wpy引入

    import 'wepy-async-function'; 

    在app.wpy中使API promise化

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

    这样我们的项目算是彻底搭建好了使用npm run dev 或者使用 wepy build --watch都可以运行

     

     

     

     

    展开全文
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 微信小程序wepy框架资源汇总 1:使用微信小程序框架wepy - 滑动删除插件 用命令安装 npm install wepy-swipe-delete --save 或者 cnpm install wepy-...
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 1:安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖...
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 wepy是腾讯自己开发的框架,作用主要是提高开发者的开发效率,采用了类似使用了vue的代码书写风格,开发者可以熟练的上手小程序开发。 先上效果图 ...
  • wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 微信小程序wepy框架资源汇总 使用sass原因 1:Sass完全兼容所有版本的CSS 2:Sass拥有比其他任何CSS扩展语言更多的功能和特性 3:增加了一些高级功能...
  • Atom 完美支持 WePY

    2018-03-06 03:15:26
    简介 为何使用WePY? 我们都知道开发小程序的时候有很多很多的不方便的地方,譬如: 小程序的组件化支持...如果你还不了解如何开发小程序,可以先看下小程序开发简易教程。 综上,便产生了一种框架WePY,详见WeP...
  • Wepy之Redux

    2018-12-05 15:34:18
    首先接手的项目因为全局变量很多 所以用this.$parents.globalData.变量的方法会比较混乱(当然 你也可以全都用全局变量) 状态管理前期的配置会相对繁琐.. 并且没有全局变量开阔.....这里是对教程的总结 便...
  • 小呱商城 一个基于wepy的迷你程序 项目介绍 完整完整功能的购物平台小...安装教程 git clone git@github.com:sec-secret/x-mall-miniprogram-wepy.git cd x-mall-miniprogram-wepy npm install wepy-cli -g npm install
  • 小程序开发之wepy框架

    2019-01-07 17:59:00
    ps 本教程使用wepy 1.7+以上的版本 wepy-让小程序支持组件化开发的框架 鹅厂出品,用于开发自家产品的框架还是很良心的,框架设计思路上参照vue,但不是全部照搬,这点要注意。 对微信小程序官方api百分百兼容,...
  • wepy2.0如何引用echart??

    2021-01-22 12:47:45
    wepy2.0引入echart的教程,小白在路上。。</p>
  • 小程序框架wepy学习

    千次阅读 2018-02-13 09:47:07
    在网上找了半天教程, 发现很多人写的很不负责,很多东西都不更新最后还是找到了官方的教程,还是官方靠谱!https://tencent.github.io/wepy/这个框架和vue很相似,这一点很好,可以很好的复习学习vue...
  • 笔者不太习惯使用微信提供的微信小程序开发工具,所以找了一些教程及资料,希望通过webstorm开发微信小程序。在环境配置过程中碰到也解决了一些问题,下面记录一下经验,以防以后忘记。 1.下载webstorm及node.js ...
  • Atom 完美支持WePY 小程序开发

    千次阅读 2018-02-22 16:37:38
    Atom-完美支持WePY 简介 为何使用WePY? ...我们都知道开发小程序的时候有很多很多的不方便的地方,譬如: ...小程序无法使用npm包,无法使用第三...如果你还不了解如何开发小程序,可以先看下小程序开发简易教程。 ...
  • Wepy-小程序踩坑记

    2018-03-20 05:11:06
    用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的,因此朋友推荐的wepy我就入坑鸟。。。这么一个跟vue的开发方式类似的框架,不过说起来跟vue类似,但是用起来还真...
  • 添加小程序,兑换各种视频教程/数据资源。 因为是公司选的框架做实战项目,所有基本是边学边做项目,遇到的一些坑,可能解决方案不完全正确,欢迎指出。 1. wepy创建项目:在安装npm的情况下。 1.1 全局安装...
  • 添加小程序,兑换各种视频教程/数据资源。 wepy的循环填充图片的src,有时候本地渲染会失败,如: 渲染失败。 如果将其本地路径向上返回1层: 就可以渲染出来了 ...
  • 今天刚使用wepy框架,按照官方教程,学习到wxpy框架的代码高亮部分,发现我的按照官方的做法之后一直报错,网上查了好久,终于解决,再此记录,方便他人! 官方教程 我使用的是VSCode进行代码高亮,官方教程如下 ...
  • 前言:用惯了get/post请求,突然来一个状态管理器,十分地不适应,网上的各式各样教程,说得都是千篇一律,没有自己见解,一直没想通用redux怎么做http请求。自己悟出来一点小门路,记下来,看以后实践起来是否正确...
  • 上周,Taro 团队发布了一篇《小程序多端框架全面测评》,让开发者对业界主流的跨端框架,有了初步认识。...真实的学习每个框架,了解它们的学习曲线,在实际开发中遇到问题时,感受它们的文档、教程、...
  • 小程序转成uniapp教程

    2020-05-27 13:56:35
    wepy to uni-app 输入wepy项目路径,输出uni-app项目。 注意:本工具基于语法转换,对于wepy自带的方法暂不支持转换,又如引用了redux也暂不支持,牵扯太多。转换项目仅供参考。 安装 $ npm install wepy-to-uniapp ...
  • 微信weixin小程序开发源码资源学习教程汇总 目录 官方文档 工具 插件 教程 视频教程 文章 组件 Demo 置顶 WePY:组件化的小程序开发框架 
  • 微信小程序实用教程

    2017-07-21 11:00:09
    微信小程序开发资源汇总 小程序框架 wepy 小程序框架 labrador 从布局开始

空空如也

空空如也

1 2 3
收藏数 58
精华内容 23
关键字:

wepy教程