Emlog百度小程序-Brief
Emlog百度小程序-Brief
图片演示 以下演示图片不代表正式版,后续会在此基础上新增功能&修改页面。 下面图片过大,可能加载时间长,请耐心等待 主页 文章详情 搜索 安装步骤 下载源码并导入到百度开发者工具 并修改setting.js文件即可使用 系统Key获取方法: 注册登录到tp.hkiii.cn 进入后台找到小程序设置-Api配置 注意生成Key输入框里面一定要填写,不然无法生成系统Key <<<<<---------(重要,一定要看‼️‼️) 填写其他相关内容后保存并刷新即可获得系统Key 有其他问题联系我QQ6283354 合法域名配置:(request) (b.bdstatic.com)获取百度图标 (tp.hkiii.cn)获取后台管理信息 您的博客域名
 2022-12-31
小程序图片加载失败替换图片
小程序图片加载失败替换图片
问题介绍 在开发小程序的时候经常会遇到有些图片失效的问题,记录下我是这么解决的 本来官方文档里面有图片发生错误监听的方法,一直没注意到 实现效果 当图片发生错误时,我们就把图片url改成默认的图片url <image binderror="imageError" class="lists-img" data-index="{{index}}" src="{{item.cover||m1.getimg(item.description)}}" mode="scaleToFill"></image> 我们先使用data-index进行数据绑定,拿到index的值 imageError(e) { var index = e.currentTarget.dataset.index; var img = 'dataa['+index+'].cover' this.setData({ [img]:'../../static/image.png' }) }, 当图片发生错误就进入这个方法,使用e.currentTarget.dataset拿到index的值 如果index为零的话,那就能知道图片的路径变量是this.data.dataa[0].cover 然后给url设置新的值即可
 2022-12-31
Css标题样式美化
Css标题样式美化
效果 今天在写Emlog百度小程序的时候发现原来的标题样式太丑了,简简单单改一下吧,本文代码可直接放在brief网站主题里面。 before伪元素选择器 :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。 代码实现 先整体设置 h1,h2,h3,h4,h5,h6{ position: relative; padding-bottom: 8px; } h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{ width: 40px; height: 3px; position: absolute; content: ''; top: auto; left: 0; bottom: 3px; border-radius: 3px; transition: 4s; } 然后单个设置颜色 h1:before{ background-image:linear-gradient(to right ,green,rgb(4, 46, 4)); box-shadow: 1px 1px 3px -1px green; } h2:before{ background-image:linear-gradient(to right ,#f17c67,#971903); box-shadow: 1px 1px 3px -1px #f17c67; } 这两个时示例其他的需要你自己添加 获取完整代码 如果您的网站主题是brief可直接替换markdown.css文件 文件地址: https://www.hkiii.cn/content/templates/brief/css/markdown.css
 2022-12-30
Emlog通用测试App
Emlog通用测试App
测试App 本app提供给Emlog站长提供测试App,可在测试版App查看自己的网站编译成App之后的效果 本app在使用之前需要站长先开启站点Api(后台管理-系统-设置- API设置) 配置详情: App下载地址 App端直接访问:Emlog通用App http://cdn.hkiii.cn/EmlogApp.apk 正式版链接: https://www.hkiii.cn/?post=200 App内配置 首先进入页面需要校验域名(只需设置一次) 成功后自动跳转到首页 EmlogApp详情页 EmlogApp详情页底部 正式版编译请联系
 2022-12-29
nginx配置跨域
nginx配置跨域
跨域 web 领域开发中,经常采用前后端分离模式。这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用。 各自独立的 web app 在互相访问时,势必存在跨域问题。解决跨域问题一般有两种思路: CORS 在后端服务器设置 HTTP 响应头,把你需要运行访问的域名加入加入 Access-Control-Allow-Origin 中。jsonp 把后端根据请求,构造 json 数据,并返回,前端用 jsonp 跨域。这两种思路,本文不展开讨论。需要说明的是,nginx 根据第一种思路,也提供了一种解决跨域的解决方案。 nginx配置跨域 宝塔配置方法:打开网站设置-配置文件-在合适地地方加入以下配置 add_header 'Access-Control-Allow-Origin' '$http_origin' ; add_header 'Access-Control-Allow-Credentials' 'true' ; add_header 'Access-Control-Allow-Methods' 'PUT,POST,GET,DELETE,OPTIONS' ; add_header 'Access-Control-Allow-Headers' 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With' ; 大功告成,跨域问题就这么解决了,相对于前端解决跨域,这个方法就简单快捷多了
 2022-12-28
鼠标停留,图片自动滚动效果
鼠标停留,图片自动滚动效果
效果展示 如果你无法看到该视频,那么可能你的电脑不支持该文件格式。 实现代码: <div class="outDiv"> <div class="innerDiv" data-img='true'> <img src="http://aimg8.dlszywz.com/xys/copy/mobile_pic/1/128_7471581637206058.jpg?x-oss-process=image/resize,m_lfit,w_360,limit_0" class="targetImg" /> </div> </div> <script type="text/javascript"> $(function() { new LongPicShow({}); }) </script> * { padding: 0px; margin: 0px; list-style-type: none; } .outDiv { width: 500px; height: 500px; margin: 20px auto; } .innerDiv { width: 500px; height: 500px; position: relative; background: #fff; overflow: hidden; } .innerDiv img { width: 100%; } 关键Js代码获取 https://www.hkiii.cn/content/templates/brief/js/demo.js
 2022-12-26
Vuex使用方法
Vuex使用方法
一、Vuex简述 Vuex其实就是一个状态管理工具,所谓的状态,就是数据,通过这个工具进行管理某些数据。当多个组件都需要同一个数据时,可以将这个数据交给Vuex进行统一的管理,组件可以直接引用这个数据,避免了组件间繁琐的层层传递的情况。 二、Vuex核心 Vuex有五大核心,state,getter,mutation,action,module。state用来存放要被管理的数据,getter相当于computed计算属性,mutation中用来定义要修改state中数据的方法,action中用来定义异步的一些方法,module可以将多个store分成一个一个的模块。 三、Vuex使用 在vue项目中使用Vuex时,需要先安装Vuex插件,并且注册,一般情况下都会在,在src下新创建一个store文件夹,下边有一个index.vue,在这个文件中创建store容器实例.。 安装插件 npm install vuex --save 注册插件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 创建vuex实例,在vuex上提供了一个Store()方法,用来创建实例,将其命名为store,意为仓库的意思。在Vuex.Store()中传一个配置对象,配置对象中包括上述的五大核心,如果用不到,也可以不做配置。 const store = new Vuex.Store({ state: {num: 2}, // 存放数据 getters: {}, // 计算属性 mutations: {}, // 修改state中数据的一些方法 actions: {}, // 异步方法 modules: {} // store模块 }) export default store 在入口文件main.js中引入store。 // main.js import Vue from 'vue' import App from './App' import store from './store/index.vue' // 简写 import store from './store' Vue.config.productionTip = false new Vue({ el: '#app', store: store, // es6 简写 直接写 store 属性名和变量名相同 render: h => h(App) }) 在页面中如何使用store中的数据?在使用vuex中的数据之前,先使用import导入写好的store。组件中在插值表达式中使用$store.state.num获取store中num的数据。 {{ $store.state.num }} 四、mapState,mapMutations,mapGetters,mapActions映射 // 先从vuex中结解构出四个方法 import {mapState, mapMutations, mapGetters, mapActions} from 'vuex' // 在computed计算属性中映射state数据和getters计算属性 computed: { ...mapState('模块名', ['name', 'age']) ...mapGetters('模块名', ['getName']) } // 在methods方法中映射mutations和actions方法 methods: { ...mapMutations('模块名', ['方法名1','方法名2']) ...mapActions('模块名', ['方法名1','方法名2']) } 这些数据和方法都可以通过this来调用和获取 以上就是vuex大致的使用方法 作者:辰漪 链接:https://www.jianshu.com/p/dcbaceb4464e
 2022-12-26

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录