前端boy-CSDN博客

原创 uni-app定义全局数据的办法

第一种找到项目中的 main.js页面，Vue.prototype.变量名 = ‘值’；Vue.prototype.baseurl = 'wwww.baidu.com' 然后在使用的页面：this.刚刚定义的变量名；this.baseurl；

2020-07-22 09:15:02 2414

原创 uni-app实现app-微信小程序点击图片保存到本地相册

uniapp实现app端和微信小程序端图片保存到本地，其它平台未测过，原理类似。微信小程序端主要是权限需要使用button的开放能力来反复调起，代码如下：首先是条件编译两个平台的按钮组件： <view class="purple_btn btn_box" @click="saveImgToLocal"> 保存到相册 </view>

2020-07-15 10:46:41 4297

原创 uni-app引入官方的css库，和组件方法

第一步：先创建一个模板创建模板的时候选择 Hello uni-app演示uni-app框架的组件、接口、模板第二步可以看到官方在这里映入了一个css文件，找到这个 css文件将他拷贝到自己的项目目录下面并且在APP.VUE里面映入...

2020-07-14 09:07:08 1531

原创 uni-app实现上传图片到 APP 和微信小程序并且预览上传的图片

第一步定义一个点击事件 <button type="primary" @click="chosseImg">上传图片</button> 再定义一个空的变量用于接收上传成功返回的图片路径 img_url: '' 当用户上传成功在图片标签里将长传成功的数据展示出来 <image v-for="item in img_url" :src='item' @click="preview(item)"></image> 然后就说当用户点击的时候调用官方的

2020-06-17 21:00:38 3691

原创 VUE引入自定义组件的方法

第一步：引入组件 import Wert from "../components/HelloWorld.vue"; 第二不：挂载组件 components: { "v-wert": Wert} 第三步使用 <v-wert></v-wert>

2020-06-15 20:15:10 2086

原创微信小程序轮播图组件代码

<swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}" interval="2000"> <swiper-item class="" item-id=""> <image class="" src="https://s2.ax1x.com/2020/02/19/3EzlcR.jpg" mode="awidthFix" lazy-load="false" binderror="

2020-05-13 16:45:44 928

原创 VUE请求数据的方法

第一步cd 到项目目录安装插件 npm install vue-resource --serve第二步找到项目目录下面的 main.js 引入：import VueResource from 'vue-resource'; Vue.use(VueResource);第三步{// GET /someUrlthis.$http.get(’/someUrl’).the...

2020-04-21 13:21:35 581

原创 ionic4-5引入使用 E-charts 图表

第一步 npm install echarts --save， npm install @types/echarts --save下载好插件后，在你需要使用图表的页面 ts 文件里引入第二步引入图表 import * as echarts from 'echarts';然后在 html 页面声明容器 <div class="echarts" id="chart" &...

2020-04-01 15:22:29 440

原创 ionic 4-5保存图片到本地手机相册

**第一步 **ionic cordova plugin add cordova-plugin-photo-librarynpm install @ionic-native/photo-library -- serve 第二步在 app.module.ts 里面引入 import { PhotoLibrary } from ‘@ionic-native/photo-library/ng...

2020-04-01 11:46:28 1281 3

原创 vue不用脚手架封装组件的方法

第一中：创建一个vue实例 <div id="app"> // mycom2 就是引入封装的公共组件 <mycom2></mycom2> </div>  <template id="tmp1"> <div> ...

2020-02-29 17:00:10 5204

原创 react 简单的配置路由跳转页面

先 cd 到要用到路由的项目里面然后 npm install react-router-dom --save 安装这个然后我的 link 文件里面就是我要跳转的配置然后就是在 tabe.jsx 页面引入 herd_list.jsx和new_list.jsx和跳转路由模块 import { HashRouter as Router,Switch,Route,Link } from 'r...

2020-02-02 18:53:10 3133 1

原创 react 的跨域请求数据的方法

下面是数据接口http://v.juhe.cn/toutiao/index?type=&key=304e0e410d0de9779780d834f6a01956实现跨域请求数据的方法第一步：把数据连接封装在一个函数里(这里我封装在了，生命周期函数里)react 自己定义的跨域请求需要把接口前面的地址拆出来比如： http://v.juhe...

2020-02-02 15:30:54 1801

原创 nodejs 模板引擎使用和后端加载公共文件方法

然后们现在要的项目需求是：当启动服务器时，页面渲染数据,然后加载应的样式文件，点击评论跳转到评论页面第一步我现在引用模板引擎主要用于后端渲染数据到前端npm install art-template 那个项目需要用模板引擎就命令行cd 到用的目录里,然后 npm install art-template 下载下载完成后，在你的项目里会有一 node_modules 的文件夹；...

2020-02-01 18:55:58 588

原创 nodejs 读取外部文件显示在页面上实现方法

假设我们现在有一个 web.js文件和一个 1.html文件。现在 web.js文件要读取 1.html文件里的类容并且要把读取的内容显示在页面上实现方法：第一步引入 http 核心模块和映入读写文件核心模块 (fs) let http = require('http') let fs = require('fs')第二步使用 http.createServer() 方...

2020-01-31 17:22:47 2548

原创 react的网络请求数据 get 请求实现方法

首页我直接把请求过来的参数直接放在了生命周期函数里面下面是请求到的数据然后我们需要把数据遍历到页面上，需要设定一个变量banners: [’’] 用来接收请求的数据，渲染到页面上 constructor(){ super(); this.state = { banners: [''] }} componentDidMount(){ f...

2020-01-31 12:41:24 7247

原创 nodejs 读写文件的模块的使用

第一步引入模块var fs = require('fs')第二步使用写文件的apifs.writeFile(‘路径’,‘我是写入的类容’,function(error,data)fs.writeFile('./uuu.txt','我是写入的类容',function(error,data){ console.log('文件写入成功')})函数里的 error 和 data：...

2020-01-30 19:07:10 370

原创 node js搭建一个简单的 web服务器

第一步引入 http 核心模块： var http = require('http')第二步使用 http.createServer() 方法创建一个 web 服务器返回一个 Server 实例 **var server = http.createServer()**第三步注册 request 请求事件 request 请求事件处理函数，需要接受两个参数 req 请求对...

2020-01-30 18:55:31 343

原创 react的DOM节点获取和多个input输入框的值获取

react 官方给我提供了一个 ref 把想要获取的div的dom绑定上 ref{this.name} this.名字是自己取得。下面是代码：import React from 'react'export default class form_input extends React.Component{ constructor(){ super() ...

2020-01-29 11:16:09 1784

原创 react 多维数组的遍历和点击添加

react 的多维数组的遍历和其它框架方法是一样的只是写法不一样import React from 'react'export default class key_arr extends React.Component{ constructor(){ super(); this.state = { multiple:[ ...

2020-01-27 12:35:15 1207

原创在react中state和setState的使用方法（详细教程）

statestate 是 react 中用来存储组件数据状态的，可以类比成 vue 中的 data。1.state的作用state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化....

2020-01-26 11:08:16 3205

原创 ionic 跳转传参的另一种方式

ionic 这一中跳转传参，不用在页面上写跳转路径首先现在跳转页面引入 import { Router } from ‘@angular/router’;然后再写上 public activated: ActivatedRoute,最后就是传参了：假设我这里有一些数据,我要把 commodity 里的herd 里面的类容传到 /inventory-save（路径）页面中;先定...

2020-01-16 17:52:06 187

原创 ionic4 跳转页面传参

带参数跳转页面：<ion-content> <ion-item (click)="gotoMyApplication(key)" *ngFor="let item of news;let key=index;" [routerLink]="[item.url]" [queryParams]="{text:item.text}"> <div c...

2020-01-09 18:54:28 316

原创微信小程序点击头部标签颜色会变而且头部下面的数据也跟着改变，有初始选择值

这是写出来后的效果里面的代码截图：数据代码逻辑代码下面是原代码：======HTML=============<view class="dx center"> <view class="win" wx:for="{{goods}}" wx:key="key" bindtap="goods_clic" id="{{index}}"> ...

2020-01-09 13:11:57 618

原创循环列表中点击更改当前项的字体颜色

方法一<view class='top'> <view class="{{ currentTab == index ? 'active' : '' }}" wx:for="{{top}}" wx:key="{{lalala}}" bindtap="{{ currentTab != index ? 'navbarTap':'...

2020-01-08 17:43:41 907

原创微信小程序获取数组对象当前点击的下标方法

这种方法在微信小程序里面获取数组对象的下标是我一直在用的，这种方法必须在数据里自己定义一个 ID 值然后获取的时候就是获取你定义的 ID 值，当然也有其它获取的方法，经供参考。下面是代码//html页面//这里绑定了一个 dome 点击事件。点击的时候获取到当前点击的下标 <view class="dx solid none center" wx:for="{{goods}}"...

2020-01-08 13:14:30 10033

原创微信小程序短信验证码码倒计时功能实现

话不多说直接上代码data: { dispay:true, second: 60, },countdown: function() { var nsecond = 60; var that = this; var appCount = setInterval(function() { nsecond -= 1; th...

2020-01-07 14:51:32 388

原创改变一个 div 的四条边的颜色

这是 div 样式改变后的图片下面是css代码：border-left-color:yellow;border-right-color:rosybrown;border-top-color:steelblue;border-bottom-color:pink;

2020-01-06 14:56:23 376

原创微信小程序开发this.data 和 this.setData({})的区别

this.setData({})用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。用this.data而不用this.setData({})会造成页面内容不更新的问题。例如下面的代码addPerson:函数中，如果写成this.data.name = ‘保存’，那么点击’新增参保人’，按钮的名称是不会更改成"保存"的。因为微信框架里面说了用this.dat...

2020-01-06 14:48:01 3105

原创 js 多维数组对象数据的访问方法

一般项目中我们会遇到像这样到的数据：public sort = [ { title: '商品分类', child: [ { child_title: '食品分类', block: 2 }, { child_title: '母婴用品', ...

2020-01-04 13:40:31 1315

原创 ionic 点击侧边栏显示影藏，自定义组件

我这个是在ionic框架里面写的，其它框架要用这种效果，也可以之间拿去用。核心的DOM操作和CSS代码不变就好了，前提是你要把代码看懂之后才能套到其它框架里面用。横简单。先看效果图如下：当我点击后效果图：代码如下:简短的思路说一下，这里引入了一个ionfont图标，定义好样式后，就是基本的js DOW操作了，默认样式为 dispay:none 为影藏；点击的时候在给赋值为新的 clas...

2020-01-03 11:02:39 320

原创类似js 点击添加商品数，数字会变

点击商品加减的时候数值会发生变化。效果图如下实现原理：定义一个数组里面放上原始的值为1或者0；然后给加的按键加一个点击事件，减的按键也加一个点击事件；当点击加这个按键的时候，数组里的值就 ++；当点击减按键的时候就判断如果数组的里原始数值 >=1 就 --;代码如下：`/*先定义一个原始的数据，这个数据是前端页面渲染在页面上的数字*/obj= { public...

2019-12-31 13:06:52 264

原创 ionic改变主题颜色

ionic默认的页面颜色是遮掩这样的：这是ionic页面的默认颜色，、想要改变就在html页面添加一个<html class="md">比如：然后CSS页面就可以设置当前页面的主题颜色了...

2019-12-27 12:57:19 553

原创访问这一个数组里面所有的对象sele属性，并且改变他 forEach 遍历改变方法

这里有 arr 数组对象我们要访问这个数组对象里面所有的 sele的值public arr = [ { id: 0, icon: 'icon-iostongzhi', name: '客户预警', color: '#02adff', sele: true, }, { id: 1, icon: 'ic...

2019-12-20 14:25:09 266

原创鼠标移动过有渐变和动画延迟效果

直接上代码 .block-collection:hover { transform: translateY(-2%); transition: all 0.5s; box-shadow: 1px 4px 10px 2px #CCC; -webkit-box-shadow: 1px 4px 10px 2px #CCC; ...

2019-12-19 19:35:10 438

原创 js数组基础操作

获取数组对象当前点击的对象的小标。和对象里面的值:public warehouse = [ { id: 0, icon: 'icon-iosshijian', name: '待出库审核', color: '#596bfc', }, { id: 1, icon: 'icon-ioshuoche', ...

2019-12-19 19:32:53 157

weixin_45301448的博客