什么网站可以做软件有哪些wordpress分享到微信

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

什么网站可以做软件有哪些,wordpress分享到微信,做网站需要阿里云吗,一个人做两个博客网站文章目录 一、运行效果二、知识储备#xff08;一#xff09;data-*自定义属性#xff08;二#xff09;模块 三、实现步骤#xff08;一#xff09;准备工作1、创建项目2、设置导航栏 #xff08;二#xff09;实现页面结构1、编写页面整体结构2、编写结果区域的结构3… 文章目录 一、运行效果二、知识储备一data-*自定义属性二模块 三、实现步骤一准备工作1、创建项目2、设置导航栏 二实现页面结构1、编写页面整体结构2、编写结果区域的结构3、编写按钮区域第一行按钮的结构4、编写按钮区域第二行按钮的结构5、编写按钮区域第三行按钮的结构6、编写按钮区域第四行按钮的结构7、编写按钮区域第五行按钮的结构8、查看页面结构源码 三实现页面样式1、编写页面样式2、编写结果区域样式3、编写按钮区域样式1按钮区域总体样式2按钮区域中每一行的样式4按钮区域每一行中每个按钮的样式5让0按钮跨2列6清除按钮样式7最后一列按钮样式8按钮的盘旋样式类 4、查看页面样式源码 四创建工具模块1、数学模块 - math.js2、计算模块 - calc.js 五实现页面逻辑六特殊情况处理 一、运行效果 二、知识储备 一data-自定义属性 app.json {pages: [pages/index/index],window: {navigationBarTextStyle: black,navigationBarTitleText: 案例3-2知识储备,navigationBarBackgroundColor: #eee},style: v2,sitemapLocation: sitemap.json }pages/index/index.wxml !–index.wxml– view姓名{{name}}/view view年龄{{age}}/view button bind:tapchange data-name陈燕文 data-age18修改姓名与年龄/buttonpages/index/index.js // index.js Page({// 定义初始数据data: {name: 未知,age: 0},// 编写修改事件处理函数change: function(e) {// 更新数据同步刷新页面this.setData({name: e.target.dataset.name,age: e.target.dataset.age})} })二模块 utils/welcome.js // 暴露一个对象 module.exports {message: 欢迎访问泸职院~ }pages/index/index.js // index.js // 引入welcome.js模块注意路径问题 var welcome require(../../utils/welcome.js) Page({// 页面加载生命周期回调函数onLoad: function() {// 访问导入模块对外暴露的数据console.log(welcome模块暴露的数据 welcome.message)},// 定义初始数据data: {name: 未知,age: 0},// 编写修改事件处理函数change: function(e) {// 更新数据同步刷新页面this.setData({name: e.target.dataset.name,age: e.target.dataset.age})} })三、实现步骤 一准备工作 1、创建项目 创建微信小程序项目 - 计算器 单击【确定】按钮 按照惯例做一些初始化工作
2、设置导航栏 在app.json文件设置window配置项
二实现页面结构 pages/index/index.wxml文件 1、编写页面整体结构 2、编写结果区域的结构 两行内容第一行是当前计算式第二行是当前计算结果
3、编写按钮区域第一行按钮的结构 第一行包含四个按钮清除按钮、删除按钮、正负号切换按钮、除号按钮 第20行代码设置了data-val自定义属性用于区分不同按钮 4、编写按钮区域第二行按钮的结构 第二行包含四个按钮7按钮、8按钮、9按钮、乘号按钮 第二行四个按钮都设置了data-val自定义属性用于区分不同按钮 5、编写按钮区域第三行按钮的结构 第三行包含四个按钮4按钮、5按钮、6按钮、减号按钮 第三行四个按钮都设置了data-val自定义属性用于区分不同按钮 6、编写按钮区域第四行按钮的结构 第四行包含四个按钮1按钮、2按钮、3按钮、加号按钮
7、编写按钮区域第五行按钮的结构 第五行包含三个按钮0按钮、点按钮、等号按钮 第58行代码设置了data-val自定义属性用于区分不同按钮查看预览效果
8、查看页面结构源码 !–index.wxml– !– 结果区域 – view classresult!– 当前计算式 –view classresult-sub{{sub}}/view!– 当前计算结果 –view classresult-num{{num}}/view /view !– 按钮区域 – view classbtns!– 第一行按钮 –view!– 清除按钮 –view hover-classbg hover-stay-time50 bind:tapbtnResetC/view!– 删除按钮 –view hover-classbg hover-stay-time50 bind:tapbtnDelDEL/view!– 正负号切换按钮 (: Positive, -: Negative)–view hover-classbg hover-stay-time50 bind:tapbtnPosNeg/-/view!– 除号按钮 –view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val÷÷/view/view!– 第二行按钮 –view!– 7按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val77/view!– 8按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val88/view!– 9按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val99/view!– 乘号按钮 –view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val××/view/view!– 第三行按钮 –view!– 4按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val44/view!– 5按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val55/view!– 6按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val66/view!– 减号按钮 –view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val–/view/view!– 第四行按钮 –view!– 1按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val11/view!– 2按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val22/view!– 3按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val33/view!– 加号按钮 –view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val/view/view!– 第五行按钮 –view!– 0按钮 –view hover-classbg hover-stay-time50 bind:tapbtnNum data-val00/view!– 点按钮 – view hover-classbg hover-stay-time50 bind:tapbtnDot./view!– 等号按钮 —— 进行计算 –view hover-classbg hover-stay-time50 bind:tapbtnCalculate/view/view /view三实现页面样式 pages/index/index.wxss文件 1、编写页面样式 编写page样式
2、编写结果区域样式 结果区域有三个样式类result、result-sub和result-num 修改页面结构暂时查看预览效果 查看预览效果之后将页面结构改回去
3、编写按钮区域样式 1按钮区域总体样式 .btns选择器 查看预览效果
2按钮区域中每一行的样式 .btns view选择器 查看预览效果
4按钮区域每一行中每个按钮的样式 .btns view view选择器 查看预览效果
5让0按钮跨2列 .btns view:last-child view:first-child选择器 查看预览效果
6清除按钮样式 .btns view:first-child view:first-child选择器 查看预览效果
7最后一列按钮样式 .btns view view:last-child选择器 查看预览效果
8按钮的盘旋样式类 .bg选择器 查看预览效果
4、查看页面样式源码 /index.wxss/ / 页面样式 / page {height: 100vh;display: flex;flex-direction: column;color: #555; }/ 结果区域样式 / .result { flex: 1; / 垂直均分手机屏幕因为flex-direction: column /background: #f3f6fe;position: relative; }/ 当前计算式样式 / .result-sub {font-size: 52rpx;position: absolute;bottom: 16vh;right: 3vw; }/ 当前计算结果样式 / .result-num {font-size: 100rpx;position: absolute;bottom: 3vh;right: 3vw; }/ 按钮区域样式 / .btns {flex: 1;display: flex;flex-direction: column;font-size: 48rpx;border-top: 1rpx solid #ccc;border-left: 1rpx solid #ccc; }/ 按钮区域中每一行的样式 / .btns view {flex: 1;display: flex; }/ 按钮区域每一行中每个按钮的样式 / .btns view view {flex-basis: 25%; / 四个按钮均分一行空间 /border-right: 1rpx solid #ccc; / 右边框线 /border-bottom: 1rpx solid #ccc; / 底边框线 /box-sizing: border-box; / 控制盒模型的尺寸计算方式 /display: flex; / 弹性布局默认是水平方向 /align-items: center; / 交叉轴居中 - 垂直居中 /justify-content: center; / 主轴居中 - 水平居中 / }/ 0按钮跨2列view:first-child ~ view:nth-child(1) / .btns view:last-child view:first-child { flex-basis: 50%; }/ 清除按钮样式 / .btns view:first-child view:first-child {color: #f00; }/ 最后一列按钮样式 / .btns view view:last-child {color: #fc8e00; }/ 按钮的盘旋样式类 */ .bg {background: #eee; }四创建工具模块 在项目根目录创建utils目录
1、数学模块 - math.js 在utils目录里创建math.js文件
// 精准计算功能用于解决JavaScript浮点数运算精度不准确的问题 module.exports {// 加法add: function (a, b) {var r1, r2, mtry {r1 a.toString().split(.)[1].length} catch (e) {r1 0}try {r2 b.toString().split(.)[1].length} catch (e) {r2 0}m Math.pow(10, Math.max(r1, r2))return (a * m b * m) / m},// 减法sub: function (a, b) {var r1, r2, m, ntry {r1 a.toString().split(.)[1].length} catch (e) {r1 0}try {r2 b.toString().split(.)[1].length} catch (e) {r2 0}m Math.pow(10, Math.max(r1, r2))// 动态控制精度长度n (r1 r2) ? r1 : r2return ((a * m - b * m) / m).toFixed(n)},// 乘法mul: function (a, b) {var m 0,s1 a.toString(),s2 b.toString()try {m s1.split(.)[1].length} catch (e) { }try {m s2.split(.)[1].length} catch (e) { }return Number(s1.replace(., )) * Number(s2.replace(., )) / Math.pow(10, m)},// 除法div: function (a, b) {var t1 0,t2 0,r1, r2try {t1 a.toString().split(.)[1].length} catch (e) { }try {t2 b.toString().split(.)[1].length} catch (e) { }r1 Number(a.toString().replace(., ))r2 Number(b.toString().replace(., ))return (r1 / r2) * Math.pow(10, t2 - t1)} }2、计算模块 - calc.js 五实现页面逻辑 六特殊情况处理