wepy框架构建小程序(1)

基本操作:

# 安装脚手架工具
npm install wepy-cli -g # 创建一个新的项目
npm init standard myproject # 进入新项目文件夹和安装依赖
cd myproject && npm install # 跑项目
npm run dev

vscode 编辑器设置

在编辑器设置中设置:

{
// 小程序设置为false
"vetur.validation.template": false
}

由于编辑器的设置有分用户设置工作区设置用户设置就是全局的基本设置,由于上面的功能在Vue项目需要开启,所以上面的设置代码应该在工作区设置中设置

简单点说就是,用户设置是全局设置,而工作区设置就是当前打开的文件夹有效,也就是局部的设置。

定义事件(重点)

事件在web端是很重要的部分,这里要搞得清清楚楚。

事件分捕获阶段事件触发点冒泡阶段

我们用的最多的是冒泡阶段。原生小程序定义事件的方式是键值对的方式key:value

原生小程序的keys:

  • bind:冒泡阶段,对应web端的on
  • catch:用这个key来定义事件不会冒泡,相当于web端的event.stopPropagation()
  • capture-bind:这个key用来定义捕获阶段,不像web端,我们要兼容IE,只考虑冒泡,因为IE老版本没有捕获
  • capture-catch:这个key在触发事件后,终止捕获,由于是捕获 -> 触发事件 -> 冒泡,所以终止捕获也终止了冒泡

bindtap:在小程序中用tap替代click,移动端用tap是避免点击事件的300ms延时造成的bug,tap触发更快。

bind:tap:这个方式也可以,就是key:value方式定义事件,value就是事件名,其他事件名大多和web端一样

wepy的事件定义:

  • bindtap替换@tap
  • catchtap替换@tap.stop
  • capture-bind:tap替换@tap.capture
  • capture-catch:tap替换@tap.capture.stop

这些语法就是Vue的语法,就是要区分这个key:value,key是什么,value是什么

安装Sass

npm i wepy-compiler-sass --save-dev

然后在<style lang='scss'>

.wpy文件

  • <template>:对应.wxml
  • <script>:分成两部分。1、逻辑部分:除了config对象,其他对应.js文件;2、配置部分:即config对象,对应.json
  • <style>:对应.wxss
  • 注意:由于config对象对应.json,但是可以是原生js对象,最后会格式化成JSON

上面3个标签都支持srclang属性:

  • src:引入外联的文件,使用了这属性,内联的代码无效
  • lang:有多个值

各个标签的lang

  • style:默认值css、可能值css、less、scss、stylus、postcss
  • template:默认值wxml、可能值wxml、xml、pug
  • script:默认值babel、可能值babel、TypeScript

状态管理器: redux + wepy-redux

先用redux生成store

import { createStore, combineReducers, applyMiddleware } from 'redux'
import promiseMiddleware from 'redux-promise'
import * as reducers from './reducer' // 生成的store和React中的redux生成方法一模一样
const store = createStore(
combineReducers(reducers),
applyMiddleware(promiseMiddleware)
)

React注入store是通过<Provider>,而wepy-redux注入store的方法用setStore(store)

wepy有3中实例App实例Page实例Component实例App只能有一个,注入store就是要在app.wpy中注入

import { setStore } from 'wepy-redux'

// app.wyp
setStore(store)
  • setStore(store)要在wepy.app的页面注入

然后就可以在任何一个组件中使用:

  import { connect } from 'wepy-redux'

  @connect({
num(state) {
return state.counter.num
},
inc: 'inc'
}, {
addNum: INCREMENT,
asyncInc
})
  • connect(states, actions)
  • states:可以是数组Array或者对象Object,用法和VuexmapState一样
// states为数组,元素只能是字符串,和`vuex`的用法一样
@connect(['num', 'inc'])
  • actions:只能是对象Object,对象的value可以是字符串(action.type)或者函数

@connect(null, {
test: 'TEST',
test2: (...args) => ({ type: 'TEST', payload: args }),
test3: { type: 'TEST', payload: 1 }
}) // 对于value是字符串,`test(1)`相当于
dispatch({
type: 'TEST',
payload: 1
}) // 调用`test(1, 2)`相当于
dispatch({
type: 'TEST',
payload: [1, 2]
}) // 调用`tes2()`相当于
dispatch(val.apply(store, args)) // this 指向store 但是自定义的函数要返回符合 { type: 'TEST', payload }的`action`对象 // 调用`test3()`
dispatch({ type: 'TEST', payload: 1 })
  • 最主要的是dispatch还是redux的dispatch,搞成这样是想把dispatch搞成和vuex的dispatch一样使用,可以支持异步(redux中原本的dispatch是同步的)
  • 这里的dispatch是通过middleware修改了redux原生的dispatch,使用了redux-promise,这样dispatch就可以支持异步以及promise
  • wepy还使用了redux-actions,来实现mutationsactions。如果不喜欢这个可以自己换redux-thunk,都可以,这些内容都属于redux(异步action),有自己的实现方案就行,你甚至都不用也可以。
  • 关于actions,如果是异步的,用test2的方式,同步的直接一个type字符串或者一个action对象

页面生命周期钩子、组件生命周期钩子

  • onLoad
  • onShow
  • onReady
  • onHide
  • onUnload

其中组件和页面公用onLoadonShow

还要区分三大实例App实例Page实例Component实例

组件间通信

小程序的组件间通信和web端的组件是有分别的,小程序的组件,两者通信主要通过广播的方式。

  • $broadcast:事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消
  • $emit:事件发起组件的所有祖先组件会依次接收到$emit事件
  • $invoke:是一个页面或者组件对另一个组件中的方法的直接调用

// 所有在当前页面或者组件中的组件,如果events定义了changeState事件,就会调用其回调函数,以及传入参数
this.$broadcast('changeState', arg1, arg2, ...) // 所有在当前组件的父组件或者父页面中,如果events定义了getId事件,就会调用其回调函数,以及 传入参数11
this.$emit('getId', 11) // 调用当前页面或者当前组件中的组件AddNumber的方法,方法add定义于methods中,以及传入参数2,相对于AddNumber.methods.add(2)
this.$invoke('AddNumber', 'add', 2)

wepy框架构建小程序(1)的更多相关文章

  1. wepy框架开发小程序遇到的node-sass问题解决方案

    一.报错图 二.解决方案 主要是windows平台缺少编译环境, 1.先运行: npm install -g node-gyp 2.然后运行cmd:(右键点击:以管理员身份运行) 输入:npm ins ...

  2. 使用wepy开发微信小程序商城第二篇:路由配置和页面结构

    使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...

  3. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  4. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...

  5. mpvue框架的小程序和H5同时开发

    demo链接1.样式统一为了达到共用一套样式,采用px2rem-loader和px2rpx-loader进行代码的打包,细节如下: 由于UI设计图是在蓝湖上标注,宽度750,选择像素 PX 样式中直接 ...

  6. mpvue构建小程序(步骤+地址)

    mpvue 是一个使用 Vue.js 开发小程序的前端框架(美团的开源项目).框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运 ...

  7. WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...

  8. 基于 mpvue 框架的小程序选择控件,支持单列,多列,联动

    最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...

  9. 使用wepy开发微信小程序01——常用的组件

    1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...

随机推荐

  1. MySQL服务器与MySQL57服务器区别与不同处在哪里,他们各自的领域范围,能不能同时启动服务?

    安装了MySQL-5.7.18.0版本数据库,版本中包含了MySQL Workbench可视化试图工具,在服务列表栏中会有MySQL的两个服务器:如果启动第一项MySQL服务器就只能操作数据库,外界不 ...

  2. mysql /etc/my.cnf

    [client] port=3306 socket = /tmp/mysql.sock default-character-set=utf8 [mysqld] # 1 general config p ...

  3. hutool java工具架包功能介绍

    https://blog.csdn.net/lx1309244704/article/details/76459718

  4. hdu3949(线性基,求第k小的异或和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3949 XOR Time Limit: 2000/1000 MS (Java/Others)    Me ...

  5. (转)老男孩linux培训某节课前考试试题及答案分享

    目录:[考试目的] ................................2[考试范围]  ...............................2[答题策略] .......... ...

  6. 物体检测丨浅析One stage detector「YOLOv1、v2、v3、SSD」

    引言 之前做object detection用到的都是two stage,one stage如YOLO.SSD很少接触,这里开一篇blog简单回顾该系列的发展.很抱歉,我本人只能是蜻蜓点水,很多细节也 ...

  7. 【踩坑】服务器部署springboot应用时报错--端口被tomcat占用

    今天将本机尬聊一下项目(基于netty-socketio)的服务端程序调试好以后,通过jar包部署在服务器的时候,出现了报错,提示tomcat已经占用了端口. 之前在部署iReview项目时的确是通过 ...

  8. Ajax 使用 FormData做为data的参数时 出现Illegal invocation

    今天在用ajax向后台传递数据时出现此错误,在ajax的参数中加上 contentType: false, processData: false, 这两句即可.

  9. C# 获取文件夹下所有的文件

    static void getAllFileNameInDir(string path, ref List<string> files) { DirectoryInfo folder = ...

  10. 永洪BI——国内领军的一站式大数据分析平台

    平台: CentOS 类型: 虚拟机镜像 软件包: jdk-7.79-linux yonghongbi.sh basic software big data business intelligence ...