当前位置：首页 > news >正文

搭建网站软件一键优化清理加速

news 2025/7/18 8:27:23

搭建网站软件,一键优化清理加速,河北省建设银行网站,网页版1688微信小程序从申请到开发（看开发内容需要有点前端的基础） 小程序申请微信公众平台邮箱：作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱信息登记要注意&#xff0…

微信小程序从申请到开发（看开发内容需要有点前端的基础）

小程序申请
- 微信公众平台
- 邮箱：作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱
- 信息登记要注意，如果你的小程序涉及个体工商户，企业，你得用企业主体，还得付每年300元的审核费，不然备案不通过！！！备案不通过就无法发布，只能自己和添加的测试人员能看到。
当所有的准备工作做好之后，接着就要开始进行微信小程序的开发，小程序开放有一套独有的开发工具，
下在地址为：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装打开
开发工具之后，默认会帮我们建立如下的项目结构：
pages展开之后，结构如下图所示：
page下面的层级，如下如所示：

WXML全称WeiXin Markup Language，是框架设计的一套标签语言，结合组件、事件系统来构建页
面的结构，其语法参考以下示例代码：

<!-- 滚动字幕 -->
<view class="notice"><view class="notice_desc"><view style="transform: translateX(-{{ distance }}px);"><text style="margin-right:{{ space }}px;"></text><text id="mjltest">{{ text }}</text><text style="margin-right:{{ space }}px;"></text><text>{{ text }}</text></view></view>
</view>
<!-- 数据列表 -->
<view class="spList"><block class="" wx:for="{{goods.data}}" wx:key="{{goods.data}}"><view id="{{item.id}}" style='display:flex;height:120px;'><!-- 左边图片 --><view style= 'width:100px;height:150px;margin:10px;'><image bindtap="previewImg" wx:if="{{item.imgSrc == ''}}" class="index-logo" style="width:100px;height:100px" src="/images/goods/fm.png"></image><image bindtap="previewImg"  wx:else="{{item.imgSrc}}" class="index-logo" style="width:100px;height:100px" data-imgUrl="{{item.imgSrc}}" src="{{item.imgSrc}}"></image></view><!-- 右边内容 上下结构 --><view style='display: flex;flex-direction: column;margin:10px'><label class="item_title">{{item.title}}</label><label class='item_content'>{{item.content}}</label></view></view><!-- 分割线（重点） start--><view class="{{index%1 === 0 && goods.data.length-index !== 0 && goods.data.length-index !== 1? 'hasLine': 'noLine'}}"></view></block>
</view>

逻辑层，是事务逻辑处理的地⽅。对于⼩程序⽽⾔，逻辑层就是.js脚本⽂件的集合。逻辑层将数据进⾏处理后发送给视图层，同时接收视图层的事件反馈。具体函数参考相关文档，此处不做详细介绍，直接上代码（相关路径图片自己放）：

// pages/index1/index1.js
Page({/*** 页面的初始数据*/data: {xs:true,goods: {"data": [{"id": 1,"imgSrc": "/images/goods/data1.png","title": "test1","content": "我是列表数据1"},{"id": 2,"imgSrc": "/images/goods/data2.png","title": "test2","content": "我是列表数据2"}]},text: "20年老店！质量有保障！欢迎新老顾客前来选购！",step: 1, // 滚动速度distance: 80, // 初始滚动距离space: 110,interval: 18 // 时间间隔},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;var query = wx.createSelectorQuery();// 选择idquery.select('#mjltest').boundingClientRect();query.exec(function(res) {var length = res[0].width;var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度that.setData({length: length,windowWidth: windowWidth,space:windowWidth});that.scrollling(); // 第一个字消失后立即从右边出现});},scrollling: function() {var that = this;var length = that.data.length; // 滚动文字的宽度var windowWidth = that.data.windowWidth; // 屏幕宽度var interval = setInterval(function() {var maxscrollwidth = length + that.data.space;var left = that.data.distance;if (left < maxscrollwidth) { // 判断是否滚动到最大宽度that.setData({distance: left + that.data.step})} else {that.setData({distance: 0 // 直接重新滚动});clearInterval(interval);that.scrollling();}}, that.data.interval);},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 用于点击图片放大*/previewImg: function(e) {let arr = []arr.push(e.currentTarget.dataset.imgurl)wx.previewImage({current: e.currentTarget.dataset.imgurl, //当前图片地址urls: arr, //所有要预览的图片的地址集合 数组形式success: function (res) {},fail: function (res) {},complete: function (res) {},})}
})

wxss文件，就是对应的css样式喽，修改页面的样式，开发工具有手机模拟器调试起来很方便，还是上代码：

/* pages/index1/index1.wxss */
page{.spList{margin-top: 35px;
}.item_content{width:100%;height:50px;font: size 12pt;color:rgb(92, 77, 77); word-break: break-al1;text-overflow: ellipsis;overflow: hidden;
}.item_from{width:130px;font-size:10pt;color:#999
}.item_iscollect{width:90px;height:18px;font-size:8pt;color:white;border-width:1px;border-style:solid;text-align:center; border-radius :5px;background-color: red;
}.item_time{width:100%;font-size:10pt;color:#999;word-break: break-all;text-overflow: ellipsis;overflow: hidden;margin-left: 20px;
}
.hasLine{width: 750rpx;height: 2rpx;border-top: 2rpx solid white;left: -30rpx;position: relative;
}
.noLine{display: none;
}.preview {cursor: pointer;
}
.item_title {font-weight: bold;
}
.notice {width: 100%;height: 56rpx;line-height: 56rpx;background-color: #fff;box-shadow: 0 3rpx 6rpx 1rpx rgba(0,97,6,0.4100);border-radius: 30rpx;position: absolute;top: 0px;left:auto;display: flex;
}
.notice .notice_desc {margin-right: 40rpx;font-size: 28rpx;color: rgb(238, 20, 20);overflow: hidden;white-space: nowrap;
}