从零开始

微信小程序中就四种类型的文件

js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------- 类似HTML文件
wxss ------- 类似CSS文件

app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，你只需创建这个文件，里面写个大括号就行以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

创建程序实例

app.js文件管理整个程序的生命周期，所以在里面添加如下代码：

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

美化ActionBar

json文件负责配置ActionBar颜色，我们只需要在里面添加如下代码即可，下图有参数说明！

{
    "window":{
        "navigationBarBackgroundColor": "#BBDEF8",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"white"
    }
}

美化页面

美化页面我们用到了 wxml 和 wxss文件为了程序代码结构简洁我们需要在跟目录下创建一个新文件夹名字随意，我们这里叫pages 然后在pages文件夹里再创建新文件夹名字随意这里我们叫 index 然后我们创建index.wxml文件然后在里面写入以下代码

<view>
    <text class="window">Hello</text>
</view>

然后创建index.wxss文件然后在里面写入以下代码

.window{
  color=#4995fa;
}

然后我们创建 index.js文件在文件中输入如下代码（输入Page IDE会有提示）

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

绑定事件

<view>
    <text catchtap="click" class="window">Hello</text>
</view>

catch 代表非冒泡事件 tap 代表点击事件所以连在一起就是非冒泡点击事件那后面那个click是啥 click 其实只是个变量名字我们在index.js需要用这个名字绑定接收事件的函数我们打开index.js 然后添加如下函数

click:function(){
    console.log("点击了文字");
  },

开发框架wepy

wepy项目的创建与使用

npm install wepy-cli -g

在开发项目中生成Demo开发项目

wepy init standard myProduct

安装依赖

npm  install

开启实时编译

wepy build --watch

代码规范

变量与方法尽量使用驼峰式命名，并且注意避免使用 $开头。以$ 开头的标识符为WePY框架的内建属性和方法，可在JavaScript脚本中以this.的方式直接使用，具体请参考API文档。
小程序入口、页面、组件文件名的后缀为.wpy；外链的文件可以是其它后缀。具体请参考wpy文件说明。
使用ES6语法开发。框架在ES6(ECMAScript 6)下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
使用Promise。框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。启用Promise方法
事件绑定语法使用优化语法代替。
原 bindtap="click" 替换为 @tap="click"，原catchtap="click"替换为@tap.stop="click"。原 capture-bind:tap="click" 替换为 @tap.capture="click"，原capture-catch:tap="click"替换为@tap.capture.stop="click"。更多@符用法，参见组件自定义事件。
事件传参使用优化后语法代替。原bindtap="click" data-index={{index}}替换为@tap="click({{index}})"。
自定义组件命名应避开微信原生组件名称以及功能标签。不可以使用input、button、view、repeat等微信小程序原生组件名称命名自定义组件；另外也不要使用WePY框架定义的辅助标签repeat命名。有关repeat的详细信息，请参见循环列表组件引用。

主要功能特性

开发模式转换

WePY框架在开发过程中参考了Vue等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式。以下是使用WePY前后的代码对比。
原生代码：

//index.js

//获取应用实例
var app = getApp()

//通过Page构造函数创建页面逻辑
Page({
    //可用于页面模板绑定的数据
    data: {
        motto: 'Hello World',
        userInfo: {}
    },

    //事件处理函数
    bindViewTap: function() {
        console.log('button clicked')
    },

    //页面的生命周期函数
    onLoad: function () {
        console.log('onLoad')
    }
})

基于WePY的代码：

//index.wpy中的<script>部分

import wepy from 'wepy';

//通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
    //可用于页面模板绑定的数据
    data = {
        motto: 'Hello World',
        userInfo: {}
    };

    //事件处理函数(集中保存在methods对象中)
    methods = {
        bindViewTap () {
            console.log('button clicked');
        }
    };

    //页面的生命周期函数
    onLoad() {
        console.log('onLoad');
    };
}

引用
作者：蒲文辉
链接：www.jianshu.com/p/aaef5ceb3…
引用
微信小程序组件化开发框架WePY官方文档
tencent.github.io/wepy/docume… 未完成

微信小程序学习