微信小程序 navigator跳转url参数传递

使用方法说明

传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="good-nav">
<navigator class="good-nav-item" url="/pages/index/good/good?type=1">
<image src="http://www.leheavengame.com/wxImages/good-nav01.png"></image>
护肤系列
</navigator>
<navigator class="good-nav-item" url="/pages/index/good/good?type=2">
<image src="http://www.leheavengame.com/wxImages/good-nav02.png"></image>
面膜系列
</navigator>
<navigator class="good-nav-item" url="/pages/index/good/good?type=3">
<image src="http://www.leheavengame.com/wxImages/good-nav03.png"></image>
彩妆系列
</navigator>
<navigator class="good-nav-item" url="/pages/index/good/good?type=4">
<image src="http://www.leheavengame.com/wxImages/good-nav04.png"></image>
小样旅行装</navigator>
<navigator class="good-nav-item" url="/pages/index/good/good?type=5">
<image src="http://www.leheavengame.com/wxImages/good-nav05.png"></image>
赠品专区</navigator>
</view>

vue-cli开发中,ajax跨域请求方法

使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题。

在config/index.js中进行如下配置

【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】

1
2
3
4
5
6
7
8
9
  proxyTable: {
'/api': {
target: 'http://www.leheavengame.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

react父子组件通信

子组件调用父组件:

1)在父组件设置对应的属性和方法;
2)将父组件的属性,方法设置在子组件的标签属性上;
3)子组件中利用this.props来调用父组件的成员;

example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//父组件:
var parent=React.cleateClass({
getDefaultProps:function(){
alert("父组件方法")
},
render:function(){
return <children a="233" getDefaultProps={this.getDefaultProps}></children>
}
})
//子组件:
var children=react.createClass({
render:fucntion(){
return <div>
<p>从父组件取得的值:{this.props.a}</p>
<button onClick={this.props.getDefaultProps}>子组件按钮</button>
</div>
}
})

对于Webpack的简单理解

关于webpack:

webpack大而全,和静态资源相关的所有它都能干涉,当然,还能启动server;webpack主要以loaders和plugins处理各种静态资源;

loaders:

在React里会用到JSX、ES6、js,我统一将文件后缀使用.js,便于babel的配置:

npm install –save babel-loader

1
2
3
4
5
6
7
8
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
CSS、scss、iconfront字体文件:

npm install –save style-loader css-loader sass-loader url-loader file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
test:/\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},{
test: /\.(woff|woff2)/,
loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"
},{
test: /\.(ttf|eot|svg)/,
loader: "file?name=./[name].[ext]"
},{
test: /\.otf/,
loader: "file?name=./[name].[ext]&minetype=application/font-otf"
}

对于Webpack的简单理解

背景

说到构建工具,我往往会在前面加「自动化」三个字,因为构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的。

什么是前端自动化?前端工程师需要维护的代码极为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。

致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。

常用的构建工具 gulp,webpack,parcel,rollup,vite ,fis,grunt等

经过多年的发展,Webpack 已经成为构建工具中的首选,这是因为:

  • 大多数团队在开发新项目时会采用紧跟时代的技术,这些技术几乎都会采用“模块化+新语言+新框架”,Webpack可以为这些新项目提供一站式的解决方案;
  • Webpack有良好的生态和维护团队,能提供良好的开发体验并保证质量;
  • Webpack 被全世界大量的Web开发者使用和验证,能找到各个层面所需要的教程和经验分享。

webpack优化

webpack优化之路

1.别名alia
1
2
3
4
5
'react': (0, join)(__dirname, './node_modules/react/dist/react.min.js'),

resolve: {
alias: alias,
},
2.css-loader < 0.15.0
1
"css-loader": "^0.14.1",
3.移除css-loader的sourcemap

这一步暂时没多大效果,继续下面的步骤

4.外部引入模块
1
2
3
4
5
6
7
8
9
10
11
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'reactUpdate': 'ReactUpdate',
'antd': 'antd',
"jquery": "jQuery",
'AMap': 'window.AMap',
'moment': 'moment',
'react-dnd': 'ReactDnD',
'react-router': 'ReactRouter'
},

比较三个CSS预处理器(框架):Sass、LESS和Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文介绍的是使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。
来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让 CSS 更见简洁,适应性更强,代码更直观等诸多好处。
接下来将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。

语法
在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法,因此可以很方便的将已有的 CSS 代码转为预处理器代码,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。

  
 css

模块化简析

关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS 、CMD AMD 这些名词,以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范,Sea.js 遵循 CMD 规范。自然直观的代码组织方式,依赖的自动加载……”  

0

什么是ES6?

什么是ES6?

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。

ECMAScript和JavaScript到底是什么关系?很多初学者会感到困惑,简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。

1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。


:D 一言句子获取中...