详解wepy开发小程序踩过的坑(小结)

引言

这篇文章主要为了帮助开发者更好地使用wepy框架开发小程序，同时在开发过程中不会遇到一些不必要的坑。

开发前的准备工作

在使用wepy框架开发小程序之前，我们需要先了解一些基本的知识，比如ES6、Vue.js等。同时，我们还需要安装相关的开发工具，如wepy-cli、微信开发者工具等，这里只简单列举，详细安装步骤可以参考wepy官网。

常见问题及解决方法

1. 小程序中的使用CSS样式的问题

在小程序中使用样式需要使用WXSS（WeiXin Style Sheets）。不同于常规的CSS语言，WXSS更加轻量化，同时也支持一些类似于变量等功能，可以方便地实现样式代码的复用，避免代码的冗余。

在wepy中，我们可以使用类似于Vue.js的写法，将组件的样式在页面的标签中引入，有效提高了代码的可维护性。示例如下：

<template>
  <view class="container">
    <view class="title">{{title}}</view>
    <view class="content">{{content}}</view>
  </view>
</template>

<script>
  import wepy from 'wepy';

  export default class MyComponent extends wepy.component {

    data = {
      title: 'Hello',
      content: 'world'
    };

    methods = {

    };

    computed = {

    };

  }
</script>

<style lang="scss">
  $color: #333333;
  $bgColor: #F2F2F2;

  .container {
    background-color: $bgColor;
    .title {
      color: $color;
      font-size: 18px;
    }
    .content {
      color: $color;
      font-size: 16px;
      line-height: 1.5;
    }
  }
</style>

1. 使用小程序协议

在使用小程序开发的过程中，在一些功能上可能需要使用到小程序提供的协议，如扫一扫、获取用户位置信息、设置系统剪切板等。在wepy中，我们可以通过设置配置文件来进行授权相关的配置，示例如下：

export default {
  pages: [
    'pages/home'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'wepy demo',
    navigationBarTextStyle: 'black'
  },  
  permission: {
    'scope.userLocation': {
      desc: '你的位置信息将用于小程序定位'
    },  
    'scope.userInfo': {
      desc: '你的信息将用于小程序登录'
    },  
    'scope.writePhotosAlbum': {
      desc: '你将需要授权相机权限，方便更好的体验小程序功能'
    },
    'scope.record': {
      desc: '你将需要授权麦克风权限，方便更好的体验小程序功能'
    }
  },
  tabBar: {
    color: '#aaa',
    selectedColor: '#007aff',
    backgroundColor: '#fff',
    borderStyle: 'black',
    list: [{
      pagePath: 'pages/home',
      text: '首页',
      iconPath: 'assets/images/tabbar/home.png',
      selectedIconPath: 'assets/images/tabbar/home_selected.png'
    }, {
      pagePath: 'pages/mine',
      text: '个人中心',
      iconPath: 'assets/images/tabbar/mine.png',
      selectedIconPath: 'assets/images/tabbar/mine_selected.png'
    }]
  }
}

结语

以上只是wepy开发小程序踩坑的一些简单总结，wepy框架在开发过程中还有很多需要注意的地方，需要开发者结合自身的经验去掌握。在此提醒读者，如果您在使用wepy框架开发小程序中遇到了其他问题，可以先查看wepy官网提供的文档，也可以在开发者社区（如gitee社区、GitHub社区）提出疑问，得到更专业的解答。