• 但是开发小程序,很多时候非常繁琐,这个原因是小程序的架构,编写一个页面需要4个文件:page.wxmlpage.wxsspage.jspage.json同时还有很多问题、完善的ES6/7语法支持、很差劲的代码编写体验。有好的解决方案吗?...

    小程序发展到了今天,已经开放出了太多的利好消息,API 也已经非常丰富和完善了。

    但是开发小程序,很多时候非常繁琐,这个原因是小程序的架构,编写一个页面需要4个文件:

    page.wxml

    page.wxss

    page.js

    page.json


    同时还有很多问题、不完善的ES6/7语法支持、很差劲的代码编写体验。


    有好的解决方案吗?

    答案是:WePY!


    WePY是腾讯开源的一个小程序开发框架,注意,是腾讯开源的。WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本。


    在WePY的GitHub官方网站是这么描述的:

    “ WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。”


    同时,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性。支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等等等等。


    这么好?如何使用呢?


    第一步:在你的电脑上安装 WePY

    npm install wepy-cli -g


    第二步:通过WePY创建项目

    wepy init standard myproject


    第三步:安装依赖

    npm install


    此时,项目创建完毕,我们就可以通过第三方开发工具打开这个项目了,这里我用的是webstom(这个工具对我个人来说是全球最好的开发者工具)。


    如果想看项目运行效果,只需要在上图的terminal中执行命令: 

    wepy build   - - watch


    此命令执行完毕后,会在myproject目录下生产一个叫 dist 的文件夹,然后用 微信开发者工具 打开dist这个文件夹,就可以看到如下图显示了。



    注意:通过微信开发者工具打开的时候可能会有错误,记得不要勾选 ES6转ES5/上传代码是样式自动补全/上传代码时自动压缩  这三项。


    同时,我们在webstorm编写的任何代码,会实时反馈到 微信开发者工具 的预览窗口上。


    在以上图片中,我能能看到一个叫 app.wpy 的文件,它是小程序的入口文件,打开它,我们会看到如下代码:

    <script>

    import wepy from 'wepy';

    export default class extends wepy.app {

        config = {

            ….

        };

        onLaunch() {

            console.log(this);

        }

    }

    </script>


    <style lang="less">

    //....

    </style>


    也就是说,在原生开发的小程序,入口文件 app.js、app.json、app.wxss 已经全部合并到 app.wpy 文件了。


    和vue一样,我们只需要在<script> </script> 里编写JavaScript代码,在<style></style> 编写css代码,在 <script> </script> 里的 config = {} 编写配置代码即可。


    在原生开发环境下,我们编写一个页面,需要到以下四个文件:

    page.wxml

    page.wxss

    page.js

    page.json



    现在,我们只需要些一个page.wpy文件就可以了,内容如下:

    <script>

    import wepy from 'wepy';

    export default class Page extends wepy.page {

        config = {};

       //.....

    }

    </script>


    <template lang="wxml">

        <view>

        </view>

    </template>


    <style lang="less">

    //....

    </style>



    <script></script>编写js代码、config = {} 编写页面配置,<template lang="wxml"></template>编写布局代码;<style lang="less"></style>编写样式代码。


    注意:此时,代码可能不是高亮的,不过没关系,在WebStorm下只需要以下两个步骤即可:

    1. 打开Settings,搜索Plugins,搜索Vue.js插件并安装。

    2. 打开Settings,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy。



    还记得小程序默认自动生成的代码吗?以下代码是获取用户信息:

    onLoad = function () {

        var self = this;

        wx.login({

            success: function (data) {

                wx.getUserInfo({

                    success: function (userinfo) {

                        self.setData({userInfo: userinfo});

                    }

                });

            }

        });

    }


    但是在WePY中,只需要两行代码就够了:

    import wepy from 'wepy';

    async onLoad() {

        await wepy.login();

        this.userInfo = await wepy.getUserInfo();

    }

    没有嵌套回调、没有setData() 赋值。


    使用WePY的组件来代替小程序原生的模板,也是极爽的,例如:

    <style lang="less">

    //...

    </style>

    <template>

      <view class="counter {{style}}">

        <button @tap="plus" size="mini">  +  </button>

        <button @tap="minus" size="mini">  -  </button>

        <text class="count" :class="{red: num > 55, green: num < 45}"> {{num}} </text>

      </view>

    </template>

    <script>

      import wepy from 'wepy'

      export default class Counter extends wepy.component {

        props = {

          num:50

        }

        methods = {

          plus () {

            this.num = this.num + 1   

          },

          minus () {

            this.num = this.num - 1

          }

        }

      }

    </script>


    以上代码写一个叫 Counter 的组件,效果如下:



    可以通过 [+] [-] 按钮对后面的数据进行修改。


    然后在页面(page.wpy)中导入该组件就可以使用了,例如:

    <script>

    import wepy from 'wepy';

    import Counter from '../components/counter';


    export default class Page extends wepy.page {

        config = {};

        components = {counter1: Counter};

        data = {};

    }

    </script>


    <template lang="wxml">

        <counter1></counter1>

    </template>


    无论在代码复用,或者是在开发体验上,真的无与伦比的爽,我们公司N个小程序都已经在使用WePY进行开发了,还没发现任何的坑,毕竟:

    1、WePY是腾讯官方开源的产品,官方保证

    2、2016年12月份推出,到目前发布了50多个版本,非常成熟

    3、基于Vue的生态编译工具和代码高亮,生态完整

    4、支持组件化、插件化、NPM、ES6/7特性,开发很爽



    WePY介绍到此,你觉得如何呢?是否想快速体验下?点击 链接 进入WePY的官方网站查看更多细节。


    另:可以加入WePY QQ交流群:131894955,进一步学习小程序开发 。

    展开全文
  • 使用wepy开发微信小程序npm i -g yarnnpm i -g wepy-cli 全局安装或更新WePY命令行工具wepy list 查看项目模板wepy init standard demo1 在开发目录中生成Demo开发项目cd demo1npm install 下载依赖开启实时编译wepy...
    使用wepy开发微信小程序
    npm i -g yarn
    npm i -g wepy-cli 全局安装或更新WePY命令行工具
    wepy list 查看项目模板
    wepy init standard demo1 在开发目录中生成Demo开发项目
    cd demo1
    npm install 下载依赖

    开启实时编译wepy build --watch

    使用webstorm开发微信小程序:
    webstorm 设置,setting里面File Types找到Vue。添加*.vue和*.wpy高亮
    下载微信代码提示插件.jar文件。导入setting.
    下载微信开发者工具参考点击打开链接
    展开全文
  • 该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风 格上80%以上接近VUE 优势 组件化开发 小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码... // index.wpy

    该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风 格上80%以上接近VUE

    优势

    组件化开发

    小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。
    wepy组件示例

        // index.wpy
    
        <template>
    
            <view>
    
                <panel>
    
                    <h1 slot="title"></h1>
    
                </panel>
    
                <counter1 :num="myNum"></counter1>
    
                <counter2 :num.sync="syncNum"></counter2>
    
                <list :item="items"></list>
    
            </view>
    
        </template>
    
        <script>
    
        import wepy from 'wepy';
    
        import List from '../components/list';
    
        import Panel from '../components/panel';
    
        import Counter from '../components/counter';
    
        export default class Index extends wepy.page {
    
            config = {
    
                "navigationBarTitleText": "test"
    
            };
    
            components = {
    
                panel: Panel,
    
                counter1: Counter,
    
                counter2: Counter,
    
                list: List
    
            };
    
            data = {
    
                myNum: 50,
    
                syncNum: 100,
    
                items: [1, 2, 3, 4]
    
            }
    
        }
    
        </script>

    支持加载外部NPM包

    小程序较大的缺陷是不支持NPM包,导致无法直接使用大量优秀的开源内容,wepy在编译过程当中,会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来,并且修改require为相对路径, 从而实现对外部NPM包的支持

    单文件模式,使得目录结构更加清晰

    小程序官方目录结构要求app必须有三个文件app.json,app.js,app.wxss,页面有4个文件 index.json,index.js,index.wxml,index.wxss。而且文 件必须同名。 所以使用wepy开发前后开发目录对比如下:
    官方DEMO:

    project
    
    ├── pages
    
    |   ├── index
    
    |   |   ├── index.json  index 页面配置
    
    |   |   ├── index.js    index 页面逻辑
    
    |   |   ├── index.wxml  index 页面结构
    
    |   |   └── index.wxss  index 页面样式表
    
    |   └── log
    
    |       ├── log.json    log 页面配置
    
    |       ├── log.wxml    log 页面逻辑
    
    |       ├── log.js      log 页面结构
    
    |       └── log.wxss    log 页面样式表
    
    ├── app.js              小程序逻辑
    
    ├── app.json            小程序公共设置
    
    └── app.wxss            小程序公共样式表
    

    使用wepy框架后目录结构:

    project
    
    └── src
    
        ├── pages
    
        |   ├── index.wpy    index 页面配置、结构、样式、逻辑
    
        |   └── log.wpy      log 页面配置、结构、样式、逻辑
    
        └──app.wpy           小程序配置项(全局样式配置、声明钩子等)
    

    如何开发

    快速起步

    目录结构 ├── dist 微信开发者工具指定的目录

    ├── node_modules
    
    ├── src                    代码编写的目录
    
    |   ├── components         组件文件夹(非完整页面)
    
    |   |   ├── com_a.wpy      可复用组件 a
    
    |   |   └── com_b.wpy      可复用组件 b
    
    |   ├── pages              页面文件夹(完整页面)
    
    |   |   ├── index.wpy      页面 index
    
    |   |   └── page.wpy       页面 page
    
    |   └── app.wpy            小程序配置项(全局样式配置、声明钩子等)
    
    └── package.json           package 配置
    

    wepy和VUE主要区别

    1.二者均支持props、data、computed、components、methods、watch(wepy中是watcher), 但wepy中的methods仅可用于页面事件绑定,其他自定义方法都要放在外层,而VUE中所有方法均放在 methods下

    2.wepy中props传递需要加上.sync修饰符(类似VUE1.x)才能实现props动态更新,并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新

    3.wepy支持数据双向绑定,子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据

    4.VUE2.x推荐使用eventBus方式进行组件通信,而在wepy中是通过broadcastbroadcast,emit,$invoke 三种方法实现通信

    · 首先事件监听需要写在events属性下:
    
    ``` bash
    
    import wepy from 'wepy';
    
    export default class Com extends wepy.component {
    
        components = {};
    
        data = {};
    
        methods = {};
    
        events = {
    
            'some-event': (p1, p2, p3, $event) => {
    
                  console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
    
            }
    
        };
    
        // Other properties
    
    }
    
    ```
    
    · $broadcast:父组件触发所有子组件事件
    
    · $emit:子组件触发父组件事件
    
    · $invoke:子组件触发子组件事件
    

    5.VUE的生命周期包括created、mounted等,wepy仅支持小程序的生命周期:onLoad、onReady等

    6.wepy不支持过滤器、keep-alive、ref、transition、全局插件、路由管理、服务端渲染等VUE特性技术

    进阶介绍

    .wpy文件说明

    一个.wpy文件可分为三大部分,各自对应于一个标签:

    • 脚本部分,即标签中的内容,又可分为两个部分:
          逻辑部分,除了config对象之外的部分,对应于原生的.js文件;
          配置部分,即config对象,对应于原生的.json文件。
    • 结构部分,即模板部分,对应于原生的.wxml文件。
    • 样式部分,即样式部分,对应于原生的.wxss文件。
      .wpy文件中的script、template、style这三个标签都支持lang和src属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码。
    标签 lang默认值 lang支持值
    style css css、less、sass、stylus
    template wxml wxml、xml、pug(原jade)
    script babel babel、TypeScript

    普通组件引用

    当页面需要引入组件或组件需要引入子组件时,必须在.wpy文件的

    <template>
        <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签,从而在`<template>`模板部分中插入组件 -->
        <child></child>
    </template>
    
    <script>
        import wepy from 'wepy';
        //引入组件文件
        import Child from '../components/child';
    
        export default class Index extends wepy.component {
            //声明组件,分配组件id为child
            components = {
                child: Child
            };
        }
    </script>

    需要注意的是,WePY中的组件都是静态组件,是以组件ID作为唯一标识的,每一个ID都对应一个组件实例,当页面引入两个相同ID的组件时,这两个组件共用同一个实例与数据,当其中一个组件数据变化时,另外一个也会一起变化。
    如果需要避免这个问题,则需要分配多个组件ID和实例。

    组件的循环渲染

    1.4.6新增
    当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用WePY定义的辅助标签

    <template>
        <!-- 注意,使用for属性,而不是使用wx:for属性 -->
        <repeat for="{{list}}" key="index" index="index" item="item">
            <!-- 插入<script>脚本部分所声明的child组件,同时传入item -->
            <child :item="item"></child>
        </repeat>
    </template>

    computed 计算属性

    computed计算属性,是一个有返回值的函数,可直接被当作绑定数据来使用。因此类似于data属性,代码中可通过this.计算属性名来引用,模板中也可通过{{ 计算属性名 }}来绑定数据。
    需要注意的是,只要是组件中有任何数据发生了改变,那么所有计算属性就都会被重新计算。

      data = {
          a: 1
      }
    
      // 计算属性aPlus,在脚本中可通过this.aPlus来引用,在模板中可通过{{ aPlus }}来插值
      computed = {
          aPlus () {
              return this.a + 1
          }
      }

    watcher 监听器

    通过监听器watcher能够监听到任何数值属性的数值更新。监听器在watch对象中声明,类型为函数,函数名与需要被监听的data对象中的数值属性同名,每当被监听的数值属性改变一次,监听器函数就会被自动调用执行一次。
    监听器适用于当数值属性改变时需要进行某些额外处理的情形。

    data = {
          num: 1
      }
    
      // 监听器函数名必须跟需要被监听的data对象中的数值属性num同名,
      // 其参数中的newValue为数值属性改变后的新值,oldValue为改变前的旧值
      watch = {
          num (newValue, oldValue) {
              console.log(`num value: ${oldValue} -> ${newValue}`)
          }
      }
    
      // 每当被监听的数值属性num改变一次,对应的同名监听器函数num()就被自动调用执行一次
      onLoad () {
          setInterval(() => {
              this.num++;
              this.$apply();
          }, 1000)
      }

    props 传值

    • 静态传值
      静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型。
      在父组件template模板部分的组件标签中,使用子组件props对象中所声明的属性名作为其属性名来接收父组件传递的值。
    <child title="mytitle"></child>
    
    // child.wpy
    props = {
        title: String
    };
    
    onLoad () {
        console.log(this.title); // mytitle
    }
    • 动态传值
      动态传值是指父组件向子组件传递动态数据内容,父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果,也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果即使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定了。
      注意:下文示例中的twoWay为true时,表示子组件向父组件单向动态传值,而twoWay为false(默认值,可不写)时,则表示子组件不向父组件传值。这是与Vue不一致的地方,而这里之所以仍然使用twoWay,只是为了尽可能保持与Vue在标识符命名上的一致性。
      在父组件template模板部分所插入的子组件标签中,使用:prop属性(等价于Vue中的v-bind:prop属性)来进行动态传值。
    // parent.wpy
    
    <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
    
    data = {
        parentTitle: 'p-title'
    };
    
    
    // child.wpy
    
    props = {
        // 静态传值
        title: String,
    
        // 父向子单向动态传值
        syncTitle: {
            type: String,
            default: 'null'
        },
    
        twoWayTitle: {
            type: Number,
            default: 50,
            twoWay: true
        }
    };
    
    onLoad () {
        console.log(this.title); // p-title
        console.log(this.syncTitle); // p-title
        console.log(this.twoWayTitle); // 50
    
        this.title = 'c-title';
        console.log(this.$parent.parentTitle); // p-title.
        this.twoWayTitle = 60;
        this.$apply();
        console.log(this.$parent.parentTitle); // 60.  --- twoWay为true时,子组件props中的属性值改变时,会同时改变父组件对应的值
        this.$parent.parentTitle = 'p-title-changed';
        this.$parent.$apply();
        console.log(this.title); // 'p-title';
        console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值,当在父组件中改变时,会同时改变子组件对应的值。
    }

    组件通信与交互

    用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中
    - broadcastbroadcastbroadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。事件广播的顺序为广度优先搜索顺序
    - emitemitemit与broadcastbroadcast正好相反,事件发起组件的所有祖先组件会依次接收到emit事件。
    - invokeinvokeinvoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。
    比如,想在页面Page_Index中调用组件ComA的某个方法:

    this.$invoke('ComA', 'someMethod', 'someArgs');

    如果想在组件ComA中调用组件ComG的某个方法:

    this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

    组件自定义事件处理函数

    可以通过使用.user修饰符为自定义组件绑定事件,如:@customEvent.user=”myFn”
    其中,@表示事件修饰符,customEvent 表示事件名称,.user表示事件后缀。
    目前总共有三种事件后缀:

    .default: 绑定小程序冒泡型事件,如bindtap,.default后缀可省略不写;
    
    .stop: 绑定小程序捕获型事,如catchtap;
    
    .user: 绑定用户自定义组件事件,通过$emit触发。
    
    // index.wpy
    
    <template>
        <child @childFn.user="parentFn"></child>
    </template>
    
    <script>
        import wepy from 'wepy'
        import Child from '../components/child'
    
        export default class Index extends wepy.page {
            components = {
                child: Child
            }
    
            methods = {
                parentFn (num, evt) {
                    console.log('parent received emit event, number is: ' + num)
                }
            }
        }
    </script>
    
    
    // child.wpy
    
    <template>
        <view @tap="tap">Click me</view>
    </template>
    
    <script>
        import wepy from 'wepy'
    
        export default class Child extends wepy.component {
            methods = {
                tap () {
                    console.log('child is clicked')
                    this.$emit('childFn', 100)
                }
            }
        }
    </script>

    slot 组件内容分发插槽

    WePY中的slot插槽作为内容分发标签的空间占位标签,便于在父组件中通过对相当于扩展板卡的内容分发标签的“插拔”,更为灵活、方便地对子组件进行内容分发。
    具体使用方法是,首先在子组件template模板部分中声明slot标签作为内容插槽,同时必须在其name属性中指定插槽名称,还可设置默认的标签内容;然后在引入了该带有插槽的子组件的父组件template模板部分中声明用于“插拔”的内容分发标签。
    注意,这些父组件中的内容分发标签必须具有slot属性,并且其值为子组件中对应的插槽名称,这样父组件内容分发标签中的内容会覆盖掉子组件对应插槽中的默认内容。

    在Panel组件中有以下模板:
    
    <view class="panel">
        <slot name="title">默认标题</slot>
        <slot name="content">默认内容</slot>
    </view>
    
    在父组件中使用Pannel子组件时,可以这样使用:
    
    <panel>
        <view slot="title">新的标题</view>
        <view slot="content">
            <text>新的内容</text>
        </view>
    </panel>

    混合

    • 默认式混合
      对于组件data数据,components组件,events事件以及其它自定义方法采用默认式混合,即如果组件未声明该数据,组件,事件,自定义方法等,那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。
    // mixins/test.js
    import wepy from 'wepy';
    
    export default class TestMixin extends wepy.mixin {
        data = {
            foo: 'foo defined by page',
            bar: 'bar defined by testMix'
        };
        methods: {
        tap () {
          console.log('mix tap');
        }
      }
    }
    
    // pages/index.wpy
    import wepy from 'wepy';
    import TestMixin from './mixins/test';
    
    export default class Index extends wepy.page {
        data = {
            foo: 'foo defined by index'
        };
        mixins = [TestMixin ];
        onShow() {
            console.log(this.foo); // foo defined by index.
            console.log(this.bar); // foo defined by testMix.
        }
    }
    • 兼容式混合
      对于组件methods响应事件,以及小程序页面事件将采用兼容式混合,即先响应组件本身响应事件,然后再响应混合对象中响应事件。
    // mixins/test.js
    import wepy from 'wepy';
    
    export default class TestMixin extends wepy.mixin {
        methods = {
            tap () {
                console.log('mix tap');
            }
        };
        onShow() {
            console.log('mix onshow');
        }
    }
    
    // pages/index.wpy
    import wepy from 'wepy';
    import TestMixin from './mixins/test';
    
    export default class Index extends wepy.page {
    
        mixins = [TestMixin];
        methods = {
            tap () {
                console.log('index tap');
            }
        };
        onShow() {
            console.log('index onshow');
        }
    }
    
    
    // index onshow
    // mix onshow
    // ----- when tap
    // index tap
    // mix tap

    拦截器

    可以使用全域拦截器配置API的config、fail、success、complete方法,参考示例:

    import wepy from 'wepy';
    
    export default class extends wepy.app {
    
        constructor () {
            this.intercept('request', {
                config (p) {
                    p.timestamp = +new Date();
                    return p;
                },
                success (p) {
                    console.log('request success');
                    return p;
                },
                fail (p) {
                    console.log('request error');
                    return p;
                }
            });
        }
    }

    WePY数据绑定方式

    WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。

    this.title = 'this is title';

    在函数运行周期之外的函数里去修改数据需要手动调用$apply方法

    setTimeout(() => {
        this.title = 'this is title';
        this.$apply();
    }, 3000);

    优化事件参数传递

    // 官方
    <view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
    Page({
      tapName: function(event) {
        console.log(event.currentTarget.dataset.id)// output: 1
        console.log(event.currentTarget.dataset.title)// output: wepy
        console.log(event.currentTarget.dataset.other)// output: otherparams
      }
    });
    
    // WePY 1.1.8以后的版本,只允许传string。
    <view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
    
    methods: {
        tapName (id, title, other, event) {
            console.log(id, title, other)// output: 1, wepy, otherparams
        }
    }

    改变数据绑定方式

    保留setData方法,但不建议使用setData执行绑定,修复传入undefined的bug,并且修改入参支持: this.setData(target, value) this.setData(object)

    // 官方
    <view> {{ message }} </view>
    
    onLoad: function () {
        this.setData({message: 'hello world'});
    }
    
    
    // WePY
    <view> {{ message }} </view>
    
    onLoad () {
        this.message = 'hello world';
    }

    重要提醒

    • 使用微信开发者工具–>添加项目,项目目录请选择dist目录。
    • 微信开发者工具–>项目–>关闭ES6转ES5。 重要:漏掉此项会运行报错。
    • 微信开发者工具–>项目–>关闭上传代码时样式自动补全。 重要:某些情况下漏掉此项也会运行报错。
    • 微信开发者工具–>项目–>关闭代码压缩上传。 重要:开启后,会导致真机computed, props.sync 等等属性失效。(注:压缩功能可使用WePY提供的build指令代替,详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。)
    • 本地项目根目录运行wepy build –watch,开启实时编译。(注:如果同时在微信开发者工具–>设置–>编辑器中勾选了文件保存时自动编译小程序,将可以实时预览,非常方便。)

    注意

    • WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法

    参考文章

    像VUE一样写微信小程序-深入研究wepy框架
    资源汇总
    微信小程序组件化开发框架 – wepyjs
    微信小程序组件化开发框架WePY官方文档
    Vue的官方文档

    展开全文
  • 使用微信web开发者工具时,有时无论怎样都无法打开,连接超时,微信扫描后一直卡在登录界面 方法1:软件重新安装,系统重启 当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,...

    问题:使用微信web开发者工具时,有时无论怎样都无法打开,连接超时,微信扫描后一直卡在登录界面

    方法1:软件重新安装,系统重启

    当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,要不就关机重启电脑,这种方法特别具有使用性,是大多数程序员必备小技巧。

    方法2:杀掉之前的残留进程

    可以尝试关掉所有跟开发者工具有关的进程,然后再开一下就行了,这个方法有些人的电脑还可以行得通。打开任务管理器,如下图所示,结束所有关于微信web开发者工具的进程。
    在这里插入图片描述

    方法3: win10下,用管理员或者兼容方式运行

    这时候我们在图标出点击右键你的微信Web开发工具,选择属性。在属性、兼容性中,点击兼容模式到兼容性选项卡(我的是win10的系统),并选着以管理员身份运行此程序。点击应用,并确认更改。
    在这里插入图片描述
    如果不行,就在加一个以win7兼容模式运行
    在这里插入图片描述

    方法4: 重新安装到一个新的目录

    重装 “微信web开发者工具” ,要把安装目录修改为非上次安装的目录(安装在一个新目录下,不受原有文件影响,小编试过安装在原有的目录下,安装过程中会报与原有文件冲突,而且安装好后也无法启动)。

    方法5:最简单暴力的方法,32位

    软件重装,系统重启,管理员运行,更换目录,表示均无效的时候,告诉你们一个奇葩解法,好了过来谢谢我,你们下个32位的!别犹豫了,对!就是32位的,见证奇迹…

    因为我的系统是windows10 64位的,所以,我下载的小程序也是64位,后来发现,其实不对,腾讯的版本似乎错了,在windows 10 的某些64位版本,要 下的是微信小程序的32位版本。

    方法6:修改显卡驱动(没试过)

    还有人说微信web开发者工具基于nw.js,本质上是一个webkit,对部分显卡驱动支持不好。在nvidia控制面板指定微信web开发者工具强制使用集成显卡,问题可解决。

    展开全文
  • wepy项目创建和启动 全局安装wepy npm install wepy-cli -g 在开发目录中创建demo项目 wepy new demo (或1.7.0之后版本使用 wepy init standard demo) 切换至项目目录 cd demo ... |-- dist ...

    wepy项目创建和启动

    全局安装wepy

    	npm install wepy-cli -g
    

    在开发目录中创建demo项目

    	wepy new demo (或1.7.0之后版本使用 wepy init standard demo)
    

    切换至项目目录

    	cd demo
    

    安装依赖

    	npm install
    

    开启实时编译

    	wepy build --watch
    

    项目的结构

     |-- dist                    小程序代码 (build自动编译生成) 
     |-- node-modules            (npm install安装依赖) 
     |-- src                      代码的开发目录 
    	|--components             wepy组件目录
    	|   |--demo.wpy
    	|
        |--pages                   wepy页面目录
        |	|--index.wpy          (经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
        |	|--center.wepy
        |
        |--app.wpy
    
    
     |-- package.json             项目给你的package配置
    
    

    项目的开发

    1、使用微信开发者工具,新建项目,本地开发选择dist目录
    2、微信开发者工具中,设置–项目设置–关闭es6转es5 注意:不关闭项目会引起报错
    3、本地开启项目实时编译:wepy build --watch

    展开全文
  • 微信开发者工具打开项目——打开dist文件 注:微信开发者工具最好只用作调试,有些文件也打开,参考wepy官方文档的语法高亮。 这里使用的是vscode,,安装非常简单百度一下你就知道 如有需要可以设置中文 ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 1.微信小程序开发者工具 ...小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue。我们选择的是 wepy PS:mpvue尤大大亲自点赞,目前...
  • 当你下载完wepy案例之后,发现并能够直接导入微信开发工具中查看,出现的情况如下图所示: 我在网上找了许多解决方案,忙活了一个上午之后终于找到一个完全可以用的链接,里面写得很详细,一步步操作就可以,写...
  • 一、 特殊文件 在 HBuilderX 中的高亮显示 场景 我们在使用 HBuilderX 进行开发的时候,可能会遇到 特殊文件 无法高亮显示的问题,... 打开该文件后,选择右下角的 text 类型为自己指定的高亮类型 图示方法 2....
  • 1、添加项目时的注意事项: 微信开发者程序不支持打开.wpy类型的文件,导入时只能导入到dist目录,之后按照以下对调试工具进行配置。
  • 在vue.json中配置代码片段 //记得vscode先安装minapp,再使用wepy "Print to console": { "prefix": "wepy", "body": [ "<template lang='wxml' miniapp='wepy'>", " <view class='container'>...
  • 因为小程序开发工具微信开发者工具)对于wepy,mpvue等不够友好,不支持打开文件后缀为.wpy等页面,所以我这里使用的是WebStorm编辑器。 在WebStorm编辑器里面,当文件后缀为.wpy,可共用Vue的高亮规则,但需要...
  • 微信开发工具 编辑功能很烂是有目共睹的,还是习惯用sublime,而sublime可以直接设置高亮的,不得佩服它的强大;一打开就是一片白,懵逼相,这是点击右下角的这个东西让wxml按照html文件高亮就可以了,同样的步骤,...
  • 微信开发者工具打开已有的wepy项目wepy项目是依赖npm的,所以在clone下来后,1.进入目录下,npm install2,运行 wepy build --watch,开启实时编译确认无误时,我们打开微信开发者工具,1.新建项目 2,填写如下,一定要...
  • vscode wechat settings.json

    2019-06-24 17:35:08
    // { // "window.zoomLevel": 0, // "editor.fontSize": 16, // "files.associations": { // "*.wpy": "vue", // "*.wxss": "css", // "*.wxml": "html" // } // } // Place your settings in this file to ove...
  • wepy是由腾讯团队推出的小程序组件化开发框架,为什么一开始推出的时候直接用这一套!?官网地址 WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。...
  • 小程序开发过程中常见问题[微信小程序、支付宝小程序] 正文 一、样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二、使用自适应单位rpx类似于rem, 布局尽量使用flex布局 UI设计...
  • 2、有时候代码从这个电脑搬到另一台电脑打开后,编译会出现不知神马的错误 3、详情显示代码大小未超过2M,但是真机调试的时候提示代码包超过2M 1、报错提示:appJSON["window"]["...
  • Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小程序语法写(view、swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果。...
1 2 3 4 5 ... 11
收藏数 215
精华内容 86