hooks taro 下拉刷新_⎛⎝乐鱼体育⎠⎞ 华体会-爱游戏首页
最近在研究小程序这方面的东西,使用到了京东基于 React 的小程序开发框架 Taro ,相比 mpvue 和 uni-app 这两个框架来说,Taro 显得更优雅,更稳重,大厂在迭代,就是不一样,一句话 ,就是坑少一点~
前置知识
看本篇教程前需要你掌握 dva ,React Hooks ,Redux ,还有小程序的开发流程。希望你知其然,并知其所以然。如果你不具备以上任意一点,建议先停下来,下面我给出地址,先自行学习之后再过来看我这篇文章 。
正式开始
安装 Taro脚手架# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
因为我电脑安装了 cnpm 镜像源,所以下文我都会用 cnpm
脚手架完成后使用脚手架初始化一个新项目
在你需要建立项目的文件夹打开 CMDtaro init test//我们演示的项目名叫test
然后跟着流程走,这边为了减少你的学习成本,建议不要选择 Typescript ,css选择less,模版选择默认模版。
最后成功之后,用你的编辑器打开test目录。
你的目录结构跟我的应该是一样的
先删除 ./src/pages 下面的 index 文件夹。
然后命令行在test 目录打开,安装我们需要用的扩展cnpm install --save @tarojs/async-await //没想到吧 在Taro里面使用 async和 await 需要安装这个扩展
cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger //Redux全家桶
cnpm install --save dva-core dva-loading //dva
cnpm install --save taro-axios //在Taro里面使用axios 需要安装他
这四个命令安装完之后,打开./src 目录 ,新建两个文件夹 ,一个叫 utils 一个叫 models 注意这两个文件夹应该跟你的 pages 文件夹同级。
在 utils 文件夹下面新建文件 dva.js 写上下面的内容 注册dvaimport { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt) {
// redux日志
// opt.onAction = [createLogger()];
app = create(opt);
app.use(createLoading({}));
if (!global.registered) opt.models.forEach(model => app.model(model));
global.registered = true;
app.start();
store = app._store;
app.getStore = () => store;
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch;
}
}
在 utils 文件夹下面新建文件 request.js 写上下面的内容 封装一个简单的axios 实际你的项目中可能不一样import axios from "taro-axios";
const baseURL = `https://blog.xiaohuwei.cn`
const service = axios.create({
baseURL: baseURL,
withCredentials: true,
timeout: 300000
});
service.interceptors.response.use(
response => {
return response.data;
},
error => {
return Promise.reject(error)
})
export default service
在 model 文件夹下面新建文件 model.js 写上下面的内容 连接你每个页面的仓库注册到全局import index from '../pages/index/model';
export default [index];
你会发现我们刚才吧 index 文件夹已经删除了 ,这里先这样写,后面我在做说明。
下一步 修改 ./src/app.jsx 作用就是把我们所有的仓库连接进来 方便你学习 下面给出修改后的全部代码import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'
import dva from './utils/dva';
import models from './models/models';
import { Provider } from '@tarojs/redux';
import './app.less'
const dvaApp = dva.createApp({
initialState: {},
models: models,
});
const store = dvaApp.getStore();
class App extends Component {
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentDidMount() { }
componentDidShow() { }
componentDidHide() { }
componentDidCatchError() { }
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render() {
return (
)
}
}
Taro.render(, document.getElementById('app'))
最后一步
在你项目 根目录 ,为了跟我保持一致,希望你在根目录新建一个叫 page.js的文件 这个文件我们用来自动生成新页面,包含新页面的 ui层 service层 和 model层方便快速开发。内容如下/**
* pages模版快速生成脚本,执行命令 npm run temp `文件名`
*/
const fs = require('fs');
const dirName = process.argv[2];
if (!dirName) {
console.log('文件夹名称不能为空!');
console.log('示例:npm run temp test');
process.exit(0);
}
// 页面模版
const indexTep = `import Taro,{useEffect} from '@tarojs/taro';
import { View,Text } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.less';
const ${titleCase(dirName)} = props =>{
const {${dirName},loading} = props;
useEffect(() => {
console.log(props)
}, [])
return (
正如你所见这是你的${dirName}页面
)
}
${titleCase(dirName)}.config = {
navigationBarTitleText: '${dirName}'
}
//全局样式继承 你可以关掉
${titleCase(dirName)}.options = {
addGlobalClass: true
}
export default connect(
({
${dirName},
loading
})=>({
${dirName},
loading
}))(${titleCase(dirName)})
`;
// less文件模版
const lessTep = `
.${dirName}-page {
}
`;
// model文件模版
const modelTep = `import * as ${dirName}Api from './service';
export default {
namespace: '${dirName}',
state: {
keai:'测试数据666'
},
effects: {
* effectsDemo(_, { call, put }) {
const { status, data } = yield call(${dirName}Api.demo, {});
if (status === 'ok') {
yield put({ type: 'save',
payload: {
topData: data,
} });
}
},
},
reducers: {
save(state, { payload }) {
return { ...state, ...payload };
},
},
};
`;
// service页面模版
const serviceTep = `import Request from '../../utils/request';
export const demo = (data) => {
return Request({
url: '路径',
method: 'POST',
data,
});
};
`;
fs.mkdirSync(`./src/pages/${dirName}`); // mkdir $1
process.chdir(`./src/pages/${dirName}`); // cd $1
fs.writeFileSync('index.js', indexTep);
fs.writeFileSync('index.less', lessTep);
fs.writeFileSync('model.js', modelTep);
fs.writeFileSync('service.js', serviceTep);
console.log(`模版${dirName}已创建,请手动按照格式增加到./src/models`);
function titleCase(str) {
const array = str.toLowerCase().split(' ');
for (let i = 0; i < array.length; i++) {
array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
}
const string = array.join(' ');
return string;
}
process.exit(0);
完成之后 去 package.json 里面的 scripts 添加一条 命令 "temp": "node page.js"
如果你能够走到这一步 ,说明你已经成功了 ,跟我的目录结构 对照一下
命令行在你的项目目录打开,我们来使用 脚本生成第一个页面 indexnpm run temp index
你会发现你的./src/pages 目录下多了 index 文件夹 并且文件夹下面已经为你初始化好了所有你需要的文件,但是并没有结束。
就是上文提到的 ,每次新建一个页面都需要去 ./src/models/models.js 手动 按照我给你的格式引入一次,因为我这个组件叫 index,所以我给你的默认就是 index,所以我这里不用改,你做项目的时候,是需要手动加的。
试试效果!npm run dev:weapp
好啦,所有的都完成啦,开始开发你的小程序吧!~
说下 Taro的注意事项
当你 使用到了 图片这些静态资源的时候 ,需要使用 import 的语法引用。
代码仓库
hooks taro 下拉刷新_⎛⎝乐鱼体育⎠⎞ 华体会-爱游戏首页相关推荐
- hooks taro 下拉刷新_小程序自定义下拉刷新(Taro版)
在考虑实现自定义的下拉刷新组件的时候,首先要明确,这个算是一种hack方案.并不是说自定义的有多么好,反而自定义的下拉刷新在android下会有细微的卡顿(我这种实现方式).所以尽量还是用小程序自带的 ...
- Taro下拉刷新,上拉加载更多
效果图: 1.引入插件 import Taro, { Component } from '@tarojs/taro' import { View, Text, ScrollView } from '@ ...
- Java txt 下拉刷新_手写上拉加载,下拉刷新(小demo)
背景 使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大 ...
- 安卓listview下拉刷新_安卓QQ内测教学,保证不让你走弯路
本文章为安卓QQ内测资格获取教程,仅针对安卓用户,苹果手机我暂无渠道.安卓QQ用户不可直接安装测试版QQ,否则会被强制退出,也无法回退旧版本,只能卸载重新安装旧版本.切记,切记,一定现申请资格,下面就 ...
- 小程序下拉刷新_微信小程序下拉刷新
下拉刷新是常用操作,微信已经集成好了(真机效果稍有瑕疵) 首先需要在.json文件启用下拉刷新 {"enablePullDownRefresh": true, } 然后在.js文件 ...
- 安卓小程序 自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
- ViewPager+下拉刷新ListView超强组合(实现360手机助手首页的效果)
转载请注明出处:http://blog.csdn.net/hello_chillax/article/details/45599215,谢谢~ 想必大家都用过360手机助手,效果是不是很绚丽,其实很好 ...
- taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
一.问题描述 最近用tarojs在做一个小程序项目时,首页需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全 ...
- ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
最新文章
- 大一计算机论文_大一计算机实验报告
- ubuntu12.10 64位编译Android4.1
- Apache与Nginx网络模型
- 我的Android进阶之旅------Android Gusture 手势识别小案例
- MySQL优化器cost计算
- leetcode 792. Number of Matching Subsequences | 792. 匹配子序列的单词数(Java)
- ssl certificate 验证
- java web数据库面试_数据库面试技巧,通过JDBC展示自己专业性,摘自java web轻量级开发面试教程...
- 深入浅出MySQL crash safe
- 基于linkboy+GD32编程实现多种屏幕显示效果(LCD1602、LCD12864、彩屏)
- 迅雷手机版苹果版_iOS迅雷2019内测版重磅发布,果粉们珍藏好这份详细下载教程...
- Wpa_supplicant 调试故障原因分析
- 强光手电充电快才能持久使用(LDR6328S)
- python培训总结心得
- iphone手机获取udid最简单的方法
- 望京,承包了帝都码农圈的魔幻
- 带加权的贝叶斯自举法 Weighted Bayesian Bootstrap
- 弹性盒子内容体居右对其_弹性盒子基本属性
- 计算机里创建本地磁盘分区,韩博士教你怎么用本地模式将电脑磁盘分区
- 午夜惊魂!频繁失控的亚马逊智能语音助手Alexa到底怎么了?
热门文章
- 一道JS面试题所引发的血案,透过现象寻本质,再从本质看现象
- 《从0到1》笔记 第一章 未来的挑战
- python集合怎么表示_Python 集合(Set)、字典(Dictionary)
- Base64图片编码的使用
- Linux项目组编程规范
- 护卫神备份mysql_MySQL数据库备份_护卫神
- CC2640R2F学习笔记(二.gpiointerrupt例程解析)
- 图片去栅栏的代码实现
- sql向数据库表中插入列,sql给表的列添加说明,sql添加主外键约束,增加列,增加字段
- 什么样的护眼灯适合学生用?学生专业读写护眼灯