- 博客(23)
- 收藏
- 关注
RSS订阅原创 uniapp中的input，输入input回车事件和输入input事件
<input class="inputclass font28" v-model="inputvalue" @input="input" placeholder="搜索" placeholder-class="color999 " confirm-type="search" @confirm="doSearch"/>data定义//搜索框 inputvalue:'',methods方法 //当键盘输入时，触发input事件， .
2022-03-28 16:24:06
21458
原创 uniapp
和page同级store文件夹下index.jsimport Vuex from 'vuex'import Vue from 'vue'const state = { hasLogin: false, //用户是否登录 userInfo: {},}const mutations = { // 登录 login(state, user) { //登录状态为已登录 state.hasLogin = true state.userInfo = user //储存用户数据到
2022-03-28 16:18:29
857
原创 uniapp轮播图照片点击实现预览效果
<template><view class="mt32" v-for="(item,index) in list" :key="index" > <view class="flexbox alignitem"> <view class="leftbox " @click="imgdetail(item.list2,index)"> <swiper class="swiper" indicator-dots="true" a.
2022-03-28 16:17:42
1140
原创 分享小程序
和page同级store文件夹下index.jsimport Vuex from 'vuex'import Vue from 'vue'const state = { hasLogin: false, //用户是否登录 userInfo: {},}const mutations = { // 登录 login(state, user) { //登录状态为已登录 state.hasLogin = true state.userInfo = user //储存用户数据到
2022-03-28 15:56:29
92
原创 uniapp分页和左滑删除
<template> <view class="content paddingbox bgwhrite"> <!--宣传活动--> <view class="contentbox2 bgfff borderradius24"> <view class="arctilelist"> <view v-for="(item,index) in list" :key="index" :class="index==list.
2022-03-26 17:36:47
579
原创 两个界面传参
1.通过点击跳转时传递id传递gotosearch(id) { let num = id.toString() uni.navigateTo({ url: '/pages/publicize/articlesearch?id=' + num }) },接受onLoad(options) { //获取传递的id this.id = options.id },调用接口，，，后台要求形式，，，前端传递形式/classificat
2022-03-26 17:24:30
1044
原创 uniapp组件jPicker使用
//2.html使用<jPicker @sure="locationChange2" :val="subjectId" :options="Neighbourhoods" showKey="name" valKey="id" />//1.引入 import jPicker from '../../components/J-Picker/jPicker.vue';//2.在methods下方法将当前的选中的id给我定义的subjectIdlocationChan.
2022-03-26 17:22:45
1599
原创 登录用户授权
和page同级的number文件夹下WXBizDataCrypt.jsvar crypto = require('crypto')function WXBizDataCrypt(appId, sessionKey) { this.appId = appId this.sessionKey = sessionKey}WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) { // base64 deco
2022-03-26 16:27:00
243
原创 uniapp
上传图片思路：先使用uniapp组件上传一张图片存到filePath: tempFilePaths[0],官网uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; uni.uploadFile({ url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址 fil...
2022-03-26 15:56:15
2926
2
原创 vuecli3父子组件及作用于插槽使用方法
父组件1.引入import HelloWorld from '@/components/HelloWord2.vue'2.声明components: {HelloWorld, },<script lang="ts">import { defineComponent } from 'vue';import HelloWorld from '@/components/HelloWord2.vue'; // @ is an alias to /srcexport.
2022-03-09 15:49:39
241
原创 vuecli3文件项目结构分析，及路由结构分析
项目分析1.app.vue是页面的根本，2.在main.js中引入页面的根本（但是不知道页面是干啥的，所以注入所有依赖，将所有依赖挂载到#app上面）3.public中的index就会通过id=“#app”调用所以说main.js只负责项目入口工作，不执行逻辑。所有的逻辑都是app.vue执行main.js与app.vue相互对接工作，主要router来进行中介，router负责页面统一管理，调配页面切换关系main.js ------------...
2022-03-09 10:48:17
3730
原创 安装node及nvm控制node版本
安装nvm1.打开链接，找到nvm-setup.ziphttps://github.com/coreybutler/nvm-windows/releases2.在setting.txt文件下加上代码node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/3.黑窗口测试nvm下载成功 命令行：nvmnvm安装node...
2022-03-09 09:06:42
929
原创 卸载vuecli2安装vuecli3，创建vuecli3项目具体步骤
1，yarn使用安装yarn npm install -g yarn查看yarn版本 yarn -vyarn安装vue yarn add vueyarn安装固定vue版本 yarn add vue@3.0.0yarn升级vue版本 yarn upgrade vue @3.2.2yarn 移出vue yarn remove vueyarn 安装所有依赖 yarn install...
2022-03-09 08:46:58
3393
原创 echarts图形
1.实现效果目录父界面<template> <div> <div class="leftBoxs"> <div class="throw flex"> <div class="throw-r sixth flex"> <div class="throw-r-item querter"> <i class="iconfont .
2022-02-22 08:51:15
466
原创 微信小程序和uniapp设置全局分享小程序代码
实现效果1.在wx下新建mixins文件夹2.在mixins新建src文件夹和index.js3.在src文件夹新建share.js代码share.jsuniapp的方法export default { onShareAppMessage(res) { //发送给朋友 return {} }, onShareTimeline(res) {//分享到朋友圈 return {} },}微信小程序的方法...
2022-02-17 09:57:53
686
原创 将数组中的某一字段放到一个数组中
代码<template> <view > </view></template><script> export default { data() { return { homelist:[], leftmenulist:[], } }, onLoad() { this.gethome(); }, methods: { gethome(){ const ...
2022-02-11 13:36:47
464
原创 uniapp封装api具体步骤
用api封装接口方法实现轮播1.在根目录下新建文件夹api，在api文件夹下新建api.js2.api.js代码（这里只写了get和post两种情况）//用BASEURL来表示域名地址const BASE_URL = 'https://api-hmugo-web.itheima.net'//封装请求方法export const myRequest = (options)=>{ return new Promise((resolve,reject)=>{ ..
2022-02-10 15:13:23
2447
3
原创 uniapp轮播代码
实现效果代码<template> <view class="content paddingbox2"> <!--banner--> <view class="swiperbox"> <swiper class="swiper" indicator-dots="true" autoplay interval="2000" duration="500" > <swiper-item v-for="
2022-02-10 13:54:45
445
原创 页面右上角文字图标 ---------点击跳转快捷方法
实现效果步骤1，到阿里巴巴下载图标压缩包2，解压，将文件放在static下3.到pages.json界面中引用“app-plus”4到界面书写跳转内置方法（和methods同级）//点击跳转+的方法onNavigationBarButtonTap: function(e) {uni.navigateTo({url: '/pages/B/B'})},代码pages.json{ "pages": [ //pages数组中第一项表示应用启
2022-02-10 10:33:44
780
原创 uniapp底部tabbar代码
实现效果代码pages.json{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index" } ,{ "path" : "pages/mine/mine", "style" :
2022-02-10 09:54:48
298
原创 uniapp实现地图定位经纬度和地址名称
实现效果点击选择定位将当前位置渲染至界面 html代码 <view>详细地址：</view> <view @click="dingwei"> <view v-if="address==''&&name==''">选择定位</view> ...
2022-02-09 11:15:53
6379
3
原创 微信小程序uniapp实现小图标转成SVN代码
实现效果1.打开阿里巴巴矢量库，找到想要的图标，赋值SVN代码iconfont-阿里巴巴矢量图标库2.打开下方网址，将复制的svn代码赋值到网址指定位置，即可得到uniapp和小程序需要的SVN代码https://codepen.io/jakob-e/pen/doMoML3.代码<template><view class="display "> <view class="display justifybetween...
2022-02-09 10:52:49
906
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人