wepy框架构建小程序(1)
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个标签都支持src
和lang
属性:
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
,用法和Vuex
的mapState
一样
// 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
,来实现mutations
和actions
。如果不喜欢这个可以自己换redux-thunk
,都可以,这些内容都属于redux(异步action),有自己的实现方案就行,你甚至都不用也可以。 - 关于actions,如果是异步的,用test2的方式,同步的直接一个type字符串或者一个action对象
页面生命周期钩子、组件生命周期钩子
onLoad
onShow
onReady
onHide
onUnload
其中组件和页面公用onLoad
和onShow
还要区分三大实例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)的更多相关文章
- wepy框架开发小程序遇到的node-sass问题解决方案
一.报错图 二.解决方案 主要是windows平台缺少编译环境, 1.先运行: npm install -g node-gyp 2.然后运行cmd:(右键点击:以管理员身份运行) 输入:npm ins ...
- 使用wepy开发微信小程序商城第二篇:路由配置和页面结构
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
- 使用wepy开发微信小程序商城第三篇:购物车(布局篇)
使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...
- 使用wepy开发微信小程序商城第一篇:项目初始化
使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...
- mpvue框架的小程序和H5同时开发
demo链接1.样式统一为了达到共用一套样式,采用px2rem-loader和px2rpx-loader进行代码的打包,细节如下: 由于UI设计图是在蓝湖上标注,宽度750,选择像素 PX 样式中直接 ...
- mpvue构建小程序(步骤+地址)
mpvue 是一个使用 Vue.js 开发小程序的前端框架(美团的开源项目).框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运 ...
- WePY 在手机充值小程序中的应用与实践
wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源 ...
- 基于 mpvue 框架的小程序选择控件,支持单列,多列,联动
最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...
- 使用wepy开发微信小程序01——常用的组件
1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...
随机推荐
- POJ1009 Edge Detection
题目来源:http://poj.org/problem?id=1009 题目大意: 某图像公司用run length encoding(RLE)的方式记录和存储了大量的图像.程序的目标是读入压缩后的图 ...
- Keepalived + Nginx + Tomcat 高可用负载均衡架构
环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...
- sql 更新 批量更新 更新得到主键
import org.springframework.dao.InvalidDataAccessApiUsageException; import org.springframework.jdbc.c ...
- 02.Spring Ioc 容器 - 创建
基本概念 Spring IoC 容器负责 Bean 创建.以及其生命周期的管理等.想要使用 IoC容器的前提是创建该容器. 创建 Spring IoC 容器大致有两种: 在应用程序中创建. 在 WEB ...
- (转)linux内核参数注释与优化
linux内核参数注释与优化 原文:http://blog.51cto.com/yangrong/1321594 http://oldboy.blog.51.cto.com/2561410/13364 ...
- MapReduce实战:邮箱统计及多输出格式实现
紧接着上一篇博文我们学习了MapReduce得到输出格式之后,在这篇博文里,我们将通过一个实战小项目来熟悉一下MultipleOutputs(多输出)格式的用法. 项目需求: 假如这里有一份邮箱数据文 ...
- 一个基于 easyui, vue 和 maptalks 的简单地图应用
一个基于 easyui, vue 和 maptalks 的简单地图应用 做了一个小应用,结合 easyui , vue 和 maptalks 的简单的地图应用.可以用来画图,什么的. 地址
- java下的串口通信-RXTX
关于java实现的串口通信,使用的是开源项目RXTX,之前sun公司也有JCL项目,不过已经很久没有更新了,RXTX项目地址:点击打开,但是两个项目的API用法是一样的,只是导入的包不一样而已.简单的 ...
- hibernate课程 初探单表映射1-10 JUnit测试
三大注解: 1 @Test 2 @Before 3 @After 执行顺序213 demo.java package hibernate_001; import org.junit.After; im ...
- 玩转Docker之常用API(四)
原文地址:http://accjiyun.cn/wan-zhuan-dockerzhi-chang-yong-api-si/ 任何一个开发的平台都会向开发者开发API,以供开发者更加自由地使用平台所提 ...