原本想用mpvue来开发小程序的,后面决定使用wepy来开发,踩坑开始,哈哈。

安装使用

安装(更新) wepy 命令行工具。

npm install wepy-cli -g

生成开发示例

wepy init standard myproject

安装依赖

cd myproject
npm install

开发实时编译

wepy build --watch

开发者工具导入项目

使用微信开发者工具新建项目,本地开发选择项目根目录,会自动导入项目配置。

vsCode 开发微信小程序可以配置以下插件,让开发更美好: 

1. vscode weapp api

2. vscode wxml

3. vscode-wechat

4. Easy WXLESS

5. VUE相关

进入配置设置 
在settings.js文件下添加如下代码

"files.associations": {
        "*.vue": "vue",
        "*.wpy": "vue",
        "*.wxml": "html",
        "*.wxss": "css"
    },
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    }

Sublime下代码高亮 
文件后缀为.wpy,可共用vue高亮,但需要手动安装。 
打开Sublime->Preferences->Browse Packages..进入用户包文件夹。 
在此文件夹下打开cmd,运行git clone git@github.com:vuejs/vue-syntax-highlight.git,无GIT用户可以直接下载zip包解压至当前文件夹。 
关闭.wpy文件重新打开即可高亮。

WebStorm下代码高亮 
打开Preferences,搜索Plugins,搜索Vue.js插件并安装。 
打开Preferences,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy,即可高亮。

Atom下代码高亮 
在Atom里先安装vue的语法高亮 – language-vue,如果装过了就忽略这一步。 
打开Atom -> Config菜单。在core键下添加:

customFileTypes:
   "text.html.vue": [
      "wpy"
   ]

代码规范

  1. 变量与方法使用尽量使用驼峰式命名,避免使用$开头。
  2. 入口,页面,组件的命名后缀为.wpy。外链的文件可以是其它后缀。
  3. 使用ES6语法开发。 框架在ES6下开发,因此也需要使用ES6开发小程序,ES6中有大量的语法糖可以让我们的代码更加简洁高效。
  4. 使用Promise: 框架默认对小程序提供的API全都进行了 Promise 处理,甚至可以直接使用async/await等新特性进行开发。
  5. 事件绑定语法使用优化语法代替: 原bindtap=”click”替换为@tap=”click”,原catchtap=”click”替换为@tap.stop=”click”。更多@符用法
  6. 事件传参使用优化后语法代替: 原bindtap=”click” data-index={{index}}替换为@tap=”click({{index}})”。
  7. 自定义组件命名应避开微信原生组件以及功能标签。 不可以使用input, button, view, repeat等命名自定义组件。

优点

  1. 支持组件化开发。
  2. 支持加载外部NPM包。
  3. 单文件模式,使得目录结构更加清晰。
  4. 默认使用babel编译,支持ES6/7的一些新特性。
  5. 针对原生API进行优化。

wpy文件说明

一个.wpy文件分为三个部分: 
1. 样式<style></style>对应原有wxss。 
2. 模板<template></template>对应原有wxml。 
3. 代码<script></script>对应原有js。

其中入口文件app.wpy不需要template,所以编译时会被忽略。这三个标签都支持lang和src属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,忽略内联代码,示例如下:

<style lang="less" src="page1.less"></style>
<template lang="wxml" src="page1.wxml"></template>
<script>
    // some code
</script>

标签对应 lang 值如下表所示:

标签               lang默认值            lang支持值
style                   css                     css,less,sass,stylus
template          wxml                   wxml,xml,pug(原jade)
script                bable                  bable,TypeScript

 

demo

index.wpy

<style lang="less">
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}
</style>
<template>
  <view class="container">
    <view class="userinfo" @tap="handleViewTap">
      <image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover" />
      <view class="userinfo-nickname">{{ userInfo.nickName }}</view>
    </view>
    <panel>
      <view>{{ datas }}'111'</view>
      <view @tap="doLogin" class="item">
        <view class="item-inner">登录</view>
      </view>
       <view @tap="enevts" class="item">
        <view class="item-inner">用户信息</view>
      </view>
    </panel>
    <panel>     
            <view class="title" slot="title">测试数据绑定</view>
            <text class="info">{{normalTitle}}</text>
            <text class="info">{{setTimeoutTitle}}</text>
            <text class="info">{{mixin}}</text>
            <text class="info">{{mynum}}</text>
            <text class="info">{{now}}</text>
            <button @tap="plus('a')" size="mini"> + </button>
          </panel>

          <panel>
            <view class="title" slot="title">其它测试</view>
            <button @tap="toast" size="mini">第三方组件</button>
            <button @tap="communicate" size="mini">组件通信</button>
            <button @tap="tap" size="mini">混合TAP事件</button>
          </panel>

          <panel>
            <view class="title" slot="title">测试并发网络请求</view>
            <view>返回结果:
              <text>{{netrst}}</text>
            </view>
            <button @tap="request" size="mini"> 点我发起10个请求 </button>
          </panel>

          <panel>
            <view class="title" slot="title">测试组件</view>

            <text class="testcounter">计数组件1: </text>
            <view class="counterview">
              <counter1 @index-emit="counterEmit" />
            </view>

            <text class="testcounter">计数组件2: </text>

            <view class="counterview">
              <counter2 :num.sync="mynum"></counter2>
            </view>
          </panel>

          <panel>
            <view class="title" slot="title">测试组件Repeat</view>
            <repeat for="{{groupList}}" index="index" item="item" key="key">
              <group :grouplist="item" :indexa="index"></group>
            </repeat>
          </panel>

          <panel>
            <view class="title" slot="title">测试列表</view>
            <list></list>
          </panel>

    <toast />
  </view>
</template>

<script>
import wepy from 'wepy'
import List from '../components/list'
import Panel from '../components/panel'
import Counter from '../components/counter'
import Group from '../components/group'
import Toast from 'wepy-com-toast'
import testMixin from '../mixins/test'
// 引入 QCloud 小程序增强 SDK
import qcloud from '../assets/qcloud-weapp-client-sdk/index'
export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: 'test'
  }
  components = {
    panel: Panel,
    counter1: Counter,
    counter2: Counter,
    list: List,
    group: Group,
    toast: Toast
  }
  mixins = [testMixin]

  data = {
    datas: '',
    mynum: 20,
    userInfo: {
      nickName: '加载中...'
    },
    normalTitle: '原始标题',
    setTimeoutTitle: '标题三秒后会被修改',
    count: 0,
    netrst: '',
    groupList: [
      {
        id: 1,
        name: '点击改变',
        list: [
          {
            childid: '1.1',
            childname: '子项,点我改变'
          }, {
            childid: '1.2',
            childname: '子项,点我改变'
          }, {
            childid: '1.3',
            childname: '子项,点我改变'
          }
        ]
      },
      {
        id: 2,
        name: '点击改变',
        list: [
          {
            childid: '2.1',
            childname: '子项,点我改变'
          }, {
            childid: '2.2',
            childname: '子项,点我改变'
          }, {
            childid: '2.3',
            childname: '子项,点我改变'
          }
        ]
      },
      {
        id: 3,
        name: '点击改变',
        list: [
          {
            childid: '3.1',
            childname: '子项,点我改变'
          }
        ]
      }
    ]
  }

  computed = {
    now() {
      return +new Date()
    }
  }

  methods = {
    doLogin() {
      qcloud.setLoginUrl('https://66280981.qcloud.la/api/user/login');
      qcloud.login({
        success: function (userInfo) {
          console.log('登录成功', userInfo);
        },
        fail: function (err) {
          console.log('登录失败', err);
        }
      });
    },
    enevts() {
       qcloud.request({
        url: `https://66280981.qcloud.la/api/user/info`,
        login: true,
        success: (response) => {
          console.log(response.data.data.userInfo)
          // this.me = response.data.data.userInfo;
          // this.connect();
        }
      });
    },
    plus() {
      this.mynum++
    },
    toast() {
      let promise = this.$invoke('toast', 'show', {
        title: '自定义标题',
        img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
      })

      promise.then((d) => {
        console.log('toast done')
      })
    },
    tap() {
      console.log('do noting from ' + this.$name)
    },
    communicate() {
      console.log(this.$name + ' tap')

      this.$invoke('counter2', 'minus', 45, 6)
      this.$invoke('counter1', 'plus', 45, 6)

      this.$broadcast('index-broadcast', 1, 3, 4)
    },
    request() {
      let self = this
      let i = 10
      let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ==']
      while (i--) {
        wepy.request({
          url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
          success: function (d) {
            self.netrst += d.data + '.'
            self.$apply()
          }
        })
      }
    },
    counterEmit(...args) {
      let $event = args[args.length - 1]
      console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
    }
  }

  events = {
    'index-emit': (...args) => {
      let $event = args[args.length - 1]
      console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
    }
  }

  onLoad() {
    let self = this
    this.$parent.getUserInfo(function (userInfo) {
      if (userInfo) {
        self.userInfo = userInfo
      }
      self.normalTitle = '标题已被修改'

      self.setTimeoutTitle = '标题三秒后会被修改'
      setTimeout(() => {
        self.setTimeoutTitle = '到三秒了'
        self.$apply()
      }, 3000)

      self.$apply()
    })
  }
}
</script>

 

转载自:https://blog.csdn.net/yang450712123/article/details/79276099

 


admin

少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。

发表评论

电子邮件地址不会被公开。 必填项已用*标注