分类： 站长笔记

发布于

webfont字体,免费在线字体

webfont(等线字体+思源字体)

下载地址:   https://wdjacms.pipipan.com/fs/16922972-297844075

 

css部分代码

@charset "utf-8";
/*
字体使用例子
*/
@font-face {font-family: 'webfont';
src: url('../webfont/webfont.eot'); /* IE9*/
src: url('../webfont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../webfont/webfont.woff') format('woff'), /* chrome、firefox */
url('../webfont/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../webfont/webfont.svg') format('svg'); /* iOS 4.1- */
}

body{ font-size:14px; font-family:"webfont"; color:#666;}

 

 

发布于

小程序截取字符串的方法

两种方法

方法一,在wxml文件中使用js实现

截取代码
<wxs module="util">
var sub = function(val) {
return val.substring(0, 10)
}
module.exports.sub = sub;
</wxs>
截取方法
<text class="time">{{util.sub(newss.time)}}</text>

方法二,在js文件中实现

代码片断

 

success: function (res) {
console.log(res.data)
if (res.data.length !== 0) {
res.data.forEach((item) => {
item.time = item.time.substring(0, 10)
});
};
wxml文件中直接这样即可
<text class="time">{{item.time}}</text>

可以根据实际需要进行选择

 

发布于

小程序开发问题"找到入口 app.json 文件，或者文件读取失败，请检查后重新编译。"

小程序开发问题"找到入口 app.json 文件，或者文件读取失败，请检查后重新编译。"

通常这种情况是因为在小程序目录中缺少配置文件project.config.json造成的.

只需要在修改一下工具中的详情信息即可.

同时查看project.config.json中是否有指定小程序目录

"miniprogramRoot": "./",

或者在app.json中添加一行配置小程序目录参数即可
{
"miniprogramRoot": "./",
"pages":[
"pages/index/index",

 

发布于

小程序swiper的高度自适应

原理

图片加载完之后，获取图片的原始宽高，根据宽高比，计算出适应后的宽高，如果是适应屏幕宽度的话，就用到 wx.getSystemInfo() 方法设备的信息，并保存到一个数组中，（因为加载的原因不能用push，只能根据索引），切换时监听当前显示的图片，根据其索引找到对应的高度，并赋值给组件即可。

 

wxml

<view class='swiper'>
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
<block wx:for='{{imgList}}' wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad"/>
</swiper-item>
</block>
</swiper>
</view>

wxss

.swiper image {
width: 100%;
height: auto;
}

js

data: {
//图片地址
imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img_bg1.png'],
//是否采用衔接滑动
circular: true,
//是否显示画板指示点
indicatorDots: false,
//选中点的颜色
indicatorcolor: "#000",
//是否竖直
vertical: false,
//是否自动切换
autoplay: true,
//自动切换的间隔
interval: 2500,
//滑动动画时长毫秒
duration: 100,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current: 0
},
imageLoad: function (e) {//获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//把每一张图片的对应的高度记录到数组里
imgheights[e.target.dataset.id] = imgheight;
this.setData({
imgheights: imgheights
})
},
bindchange: function (e) {
// console.log(e.detail.current)
this.setData({ current: e.detail.current })
},

 

来源

https://www.cnblogs.com/wangyihong/p/8610956.html

发布于

js实现tab切换,支持单页面多个调用

js代码部分

 

<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>

 

html部分
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" onmouseover="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>
<li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>
<li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
</div>
</div>

其中onmouseover为鼠标移动到选项卡切换,如需点击切换,请修改为onclick

 

css部分自理

 

发布于

小程序APP方法使用步骤

在app.js中注册

//app.js
App({
onLaunch: function(options) {
console.log("onLaunch");
},
onShow: function(options) {
console.log("onShow");
// Do something when show.
},
onHide: function() {
console.log("onHide");
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
test:function() {
console.log("I am func from App.js");
},
globalData: {
userInfo:null,
url: 'https://wdja.cn/api.php'
}
})

在index.js中使用

两种方法

var app = getApp();

onLoad: function () {
var that = this
wx.request({
url: app.globalData.url,
.......

app.test(); // 调用全局方法

或直接

onLoad: function () {
var that = this
wx.request({
url: getApp().globalData.url,

.....

getApp().test(); // 调用全局方法

 

发布于

微信小程序image图片自适应的方法

 

一.使用mode属性

mode：widthFix

<image class="img" src="/hello.png" mode="widthFix">

.img{
　　width: 100%;
}
或
.img{
　　width: 100rpx;
}
二.用bindload绑定函数js处理
<image src="{{%20item%20}}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
Page({
data: {
images:{}
},
imageLoad: function(e) {
var $width=e.detail.width, //获取图片真实宽度
$height=e.detail.height,
ratio=$width/$height; //图片的真实宽高比例
var viewWidth=718, //设置图片显示宽度，左右留有16rpx边距
viewHeight=718/ratio; //计算的高度值
var image=this.data.images;
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
this.setData({
images:image
})
}
})
发布于

PHPStudy遇到80端口被占用的解决思路及方法

PHPStudy遇到80端口被占用的解决思路及方法

通过phpstudy的环境端口检测,在端口列表中查看80端口占用的进程.

如果不是system占用,则找到对应的软件停用即可解决.

如果是system占用,则通过以下方法来解决:

停用IIS/或卸载IIS

禁用服务(iisadmin和World Wide Web Publishing Service)

修改注册表HKEY_LOCAL_MACHINESYSTEMCurrentControlSetservicesHTTP,在右边找到Start这一项，将其改为0

SqlServer版本的配置工具中打开Reporting Services 配置管理器，停止占用80端口的报表服务Reporting Service）或者服务中找到SQL Server Reporting Services (MSSQLSERVER),禁用即可.防止开机后重新启动.

以上为PHPStudy遇到80端口被占用的解决思路及方法,如果还无法解决,建议修改phpstudy的端口来解决.

发布于

phpStudy中 phpmyadmin 报错 #2002 无法登录 MySQL 服务器

windows xp/2003/vista/2008/7/8用户请先排查HOSTS文件(c:windowssystem32driversetc)中

127.0.0.1 localhost

是否有以上一行IP指向.

有如下2种方式：

1.将phpMyAdmin中的config.sample.inc.php复制成config.inc.php编辑config.inc.php文件，

将$cfg[‘Servers’][$i][‘host’] = ‘localhost';
改为$cfg[‘Servers’][$i][‘host’] = ‘127.0.0.1’;
2.修改php配置目录中的， php.ini : mysql.default_socket = /tmp/mysql.sock
以上方式选一即可。
建议第一种.
发布于

微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用

wx:for

主要用于循环输出数组,对象等;

wx:key

主要用于在动态生成的列表当中,保持一些栏位的状态不变;
官方的解释是:
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

一般是指定一个唯一的字段(类似于id的定义);

wx:for-item

一般用于指定第二层及以上循环当中的指代字段名;

明确的指定字段来取值来说,小程序为了弥补这个缺陷,特意定义了wx:for-item来指代具体的字段名,当然啦,你可以随便定义;

<view class='city' wx:for="{{cityList2}}">
<view wx:for="{{item.list}}" wx:key="{{item.id}}" wx:for-item="cityItem">
{{cityItem.id}}
{{cityItem.city}}
</view>
</view>

wx:for-items

这个功能,效果和wx:for是一样的,都是用于循环数据的

wx:for等价与wx:for-items是循环数组用的；而wx:for-item则是给列表赋别名用的