安装脚手架 . 安装构件工具 npm i wepy-cli -g .创建项目 wepy new 项目名 .实时编译 wepy build --watch 或 npm run dev .使用微信开发者工具新建项目,本地开发选择dist目录. .微信开发者工具 --> 项目 --> 关闭ES6转ES5. 代码规范: .变量与方法使用尽量使用驼峰式命名,避免使用$开头. 以$开头的方法或者属性为框架内建方法或者属性,可以被使用,使用前请[参考API文档](). .入口,页面,组件的命名后缀为.wpy…

像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多的能力,包括定位.录音.文件.媒体.各种硬件能力等,想象空间更大 2.运行在微信内部,体验更接近APP 3.在过度竞争的互联网行业中,获取一个有效APP用户的成本已经非常高了,小程序相比APP更加轻量.即用即走, 更容易获取用户 开发对比 从开发角度来讲,小程序官方封装了很多常用组件给开发带来很多便…

今天在自己写wepy框架组件的时候编译后报错not Found File XXX.wxss 我去,当时我很难受啊,调用组件时结构和逻辑都正常,一写样式就原地爆炸 解决之路:1.先打开编译后的dist文件夹看一下,发现组件的wpy文件编译后只有wxml文件和js文件,wxss文件不翼而飞 我他娘的wxss文件呢,我去,难道是依赖的某个包有问题?不应该啊,我别的自定义组件都是正常的,这尼玛灵异事件?? 我又怀着怕怕的心重新看了看代码,我去,没瑕疵啊这代码,如此的完美,这他娘的是个什么鬼bug 正当我…

1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文档) 2.为什么会出现wepy 我虽然还没有在实际项目中完整开发过一个APP,但自己看着文档敲着DEMO再道听途说一下也都知道,小程序是有很多限制的,小项目可能觉得无所谓,可业务稍微复杂一点,写起来和维护起来都是非常蛋疼的.主要表现在以下几个方面: 组件化支持能力太弱(几乎没有) 不能使用 less…

wepy官方文档:https://tencent.github.io/wepy/document.html#/ 1.项目下载 # .安装wepy-cli npm install wepy-cli -g # .利用wepy-cli创建项目 wepy init standard myproject # .切换目录: cd myproject # .安装依赖包 npm install # .打开开发模式 npm run dev 一套结果走下来如图所示(未使用redux): src目录下有compone…

wepy框架构建小程序(1) 基本操作: # 安装脚手架工具 npm install wepy-cli -g # 创建一个新的项目 npm init standard myproject # 进入新项目文件夹和安装依赖 cd myproject && npm install # 跑项目 npm run dev vscode 编辑器设置 在编辑器设置中设置: { // 小程序设置为false "vetur.validation.template": false } 由于编…

优势:比 url 传递.或是 storage .或是 globalData 更方便 1:如 url 不能直接传一个 Object 要传的又要序列化与反序列化操作,麻烦(普通的单个变量还是挺便捷简单实在的) 2:如 storage 也麻烦,又要set 到用的时候还要 get 3:  globalData 来虽然比上面两种貌似更有优势,但是这个交互的数据挺大,整天挂载在globalData,同时挂载上后去到那个页面能访问的到(别人说可以设置null,即使这样还不是      多以key在global…

1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 promise this.use('requestfix'); this.intercept('request', { // 发出请求时的回调函数 config (p) { // 对所有request请求中的OBJECT参数对象统一附加时间戳属性 p.pp="ceshi" console.l…

最近在学习使用wepy框架制作小程序,导入编译的项目后报如下错误(error  More than 1 blank line not allowed  no-multiple-empty-lines) 解决办法:编译项目之前,在文件wepy.config.js中 设置参数eslint: false,编译完成后导入微信开发者工具,项目恢复正常…

转载:https://www.jianshu.com/p/93d5a4b99777 安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy new myproject 开发实时编译. wepy build --watch 项目目录结构 dist node_modules src components com_a.wpy com_b.wpy pages index.wpy page2.wpy app.wpy package.json 使…

基本示例 import wepy from 'wepy';//引入wepy框架说明 // 通过继承自wepy.page的类创建页面逻辑 export default class Index extends wepy.page { //用于页面模板绑定的数据 data={ motto: 'hello world', userInfo: {} } //事件处理函数(集中保存在methonds对象中) methods = { bindViewTap(){ console.log('button cli…

安装 wepy 命令行工具. npm install wepy-cli -g 在开发目录生成开发DEMO. wepy new myproject 开发实时编译. wepy build --watch 项目目录结构 dist node_modules src components com_a.wpy com_b.wpy pages index.wpy page2.wpy app.wpy package.json 使用微信开发者工具新建项目,本地开发选择dist目录. 微信开发者工具 --> 项目…

Wepy框架 它是一款类Vue框架,在代码风格上借鉴了Vue,本身和Vue没有任何关系. mpVue框架 它是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力. 三者的区别图: 使用mpVue时需要注意的点: 1. 在模板中,动态插入HTML的v-html指令不可用 这条很好理解,小程序的界面并不是基于浏览器的BOM/DOM的,所以不能动态的在界面模板里直接插入HTML片段来显示. 题外话,如果有在小程序里插入html片段的需求怎么办?可…

WePY框架的.wpy 文件在微信开发者工具中无法打开,这里使用vscode 打开,并安装vetur 和vetur-wepy  插件即可…

最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍 小程序相关项目 1.wepy项目     https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co…

1.介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 2.使用 npm install -g wepy-cli //全局安装或更新WePY命令行工具(wepy脚手架): wepy-cli wepy -v //查看wepy-cli版本 wepy init standard <projectName> //新建wepy小程序项目,1.7.0之前的版本使用:wepy new myproject,安装项目翻译一…

我用的是yarn,如果你使用的是npm,也可以 首先需要安装wepy命令行工具 npm install wepy-cli -g 然后在选定的位置使用脚手架工具创建wepy项目 wepy init standard yy-cabinet PS C:\Users\gushi\Desktop> wepy init standard yy-cabinet ? Project name yy-cabinet ? Project description 研一智能药剂柜微信小程序项目 ? Author gst…

现如今mvvm框架如此火热,其核心思想即js逻辑层不直接操作DOM,只改变组件状态:而视图层则通过模板template进行渲染. 1.WePy项目的目录结构 ├── dist 小程序运行代码目录 ├── node_modules 依赖 ├── src 代码编写的目录 | ├── components WePY组件目录 | | ├─- com_a.wpy 可复用的WePY组件a | | └── com_b.wpy 可复用的WePY组件b | ├── pages WePY页面目录(属于完整页面) |…

ps 本教程使用wepy 1.7+以上的版本 wepy-让小程序支持组件化开发的框架 鹅厂出品,用于开发自家产品的框架还是很良心的,框架设计思路上参照vue,但不是全部照搬,这点要注意. 对微信小程序官方api百分百兼容,不同的是把wx开头的接口,变成wepy开头即可. 安装 全局安装命令行工具 npm install wepy-cli -g 安装完成后,运行wepy -v, 如果命令行输出版本号则说明安装成功. 初始化项目 wepy init standard 项目名 查看模板列表 wepy…

开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序…

1.wepy组件的编译 wepy中使用一个组件时候,需要先引用(import).再在需要使用该组件的页面(或组件)中声明.例如: import Counter from '/path/to/Counter'; components = { counter1: Counter, counter2: Counter} 引入一个组件要出现在多处分别使用时,需要为组件分配不同的id,此处分别为counter1,counter2. 如果Counter组件模板 <view>{{counter}}</…

1:定义组 <template> <view class="app-loading-container" style="{{options.cssText}}" wx:if="{{options.visible}}"> <image mode="aspectFit" src="{{appLoading}}" class="app-loading-img animate…

一.报错图 二.解决方案 主要是windows平台缺少编译环境, 1.先运行: npm install -g node-gyp 2.然后运行cmd:(右键点击:以管理员身份运行) 输入:npm install --global -production windows-build-tools  成功图: 3.在项目根目录下新建一个.npmrc,目的是把国外的npm源指向国内的镜像. 内容: phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binar…

呵呵.介绍说是类似vue,用起来真累人,就想在模板中使用个函数都要查N久的文档才知道. 具体要怎么操作呢? 要先创建个wxs脚本文件,在里面定义函数或其它的,然后在页面或组件中引入这文件,就可以在模板中使用了. 真搞不懂为什么要绕这么一大圈,直接可以使用在methods中定义的方法不行吗? 恶心的一批. // 页面代码 <template> <view> {{xx(name)}} </view> </template> <script> impo…

恶心死我, 1 在项目里出现了中文乱码(utf-8在wpy文件里有中文和注释--编译后就转化成乱码, 把代码拷在另外的项目里,(该项目没有中文乱码现象,)编译出来就出现中文乱码, 然后我再在所拷的代码文件增加无关的,或删除一些无关的空格,出现了奇妙的现象,---有部分文件就没有乱码现象-- 明明在拷代码到项目时就编译了一次的呀, 奇妙的开发者工具里(苦笑)...本来想用wepy是腾讯开发的,应该会好一些,,结果还是不理想…

$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$broadcast事件,那么按先后顺序依次接收到该事件的组件为:ComA.ComB.ComC.ComD.ComE.ComF.ComG.ComH.如下图     理解官方意思就是:如果通过当前组件进行$broadcast广播事件,那么就只有它的子组件能接收事件,它的父组件和兄弟组件是无法接收到消息.调用方式…

$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$broadcast事件,那么按先后顺序依次接收到该事件的组件为:ComA.ComB.ComC.ComD.ComE.ComF.ComG.ComH.如下图     理解官方意思就是:如果通过当前组件进行$broadcast广播事件,那么就只有它的子组件能接收事件,它的父组件和兄弟组件是无法接收到消息.调用方式…

https://github.com/dlhandsome/wepy-com-swiper…

上图所圈的写法会造成如下图所示 在微信开发工具是没有问题的,在真机 运行下会出现空格问题. 解决如下:…

布局搞定了,接下来就是数据处理方面了 form表单中常用标签,绑定change方法: 方法的具体实现 根据打印出来e的结果可以看到,e指代当前标签对象,包含属性方法等 从detail中可以获取多选框选中的value值,从target可以得到id 当然标签对象中还有很多其他有用的东西,需要的时候就打印出来,研究…