技术标签: 经验分享 微信公众平台 微信小程序 微信开放平台 微信
《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社
目录
2.请编写一个用户登录页面,提示输入用户名和密码进行登录。
1.在微信小程序的页面组件中,视图容器组件用(C)表示。
A.<block>
B.<text>
C.<view>
D.<icon>
2.在微信小程序的页面组件中,图片组件用(C)表示
A.<block>
B.<img>
C.<image>
D.<canvas>
3.在小程序的页面组件中,(A)是定义进度条的。
A. < progress>
B. < program>
C.<slider>
D.<swiper>
4.在小程序的页面组件中,(D)是定义单选框的。
A.<checkbox>
B.<input>
C.<button>
D.<radio>
1.下面选项中,关于选择器的说法正确的是(ABCD)。
A.element 选择器,可以通过组件名获取元素
B.class 选择器,可以通过类名获取元素
C.id选择器可以通过id属性获取元素
D.vie:after 表示在元素view组件内的后面插入元素
2.下面选项中,属于微信小程序页面组件的有(BCD)。
A.<div>
B.<form>
C.<input>
D.<view>
3.下面关于微信小程序创建项目的说法,正确的是(ABD)。
A.通过微信开发者工具进行微信小程序的创建
B.微信小程序项目的创建通过AppID 和测试进行创建
C.创建微信小程序空白项目会自动创建app.json文件
D. 创建微信小程序空白项目会自动创建project. config. json文件
1.wxss具有CSS大部分特性,并在此基础上做了一些扩充和修改。(√)
2.WXs支持使用选择器来为某个元素设置样式,其使用方法和CSS选择器基本相同。(√)
3.微信小程序页面组件开发中的<view>组件,类似于HTML5中的<div>标签。(√)
4.<view>和<text>标签属于双标签,由开始标签和结束标签两部分组成。(√)
1. input标签的(type)属性表示输入的类型,如文本、数字、身份证等。
2. input标签的type值是(number)表示数字输入键盘。
3. input标签的type值是(text)表示文本输入键盘。
4.input标签的type值是(idcard)表示身份证输入键盘。
5. input标签的type值是(digit)表示带小数点的数字键盘。
6.在微信小程序开发过程中,(page)标签是页面结构中的根标签。
rpx单位规定了任何手机屏幕宽度都为750rpx;不同的设备关系不同,iPhone6中 1rpx=0.5px;iPhone5中 1rpx=0.42px;iPhone6 Plus中 1rpx=0.552px。
view表示视图容器、文本域、图标文件、表单、图片组件。
文件目录:
(1)在app.js文件中定义全局数据
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
goodsdata: [
{
id:0,
title:"(HUAWEI)P30",
titleTwo:"超感光莱卡三摄",
price:"4288",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522069432.jpg"
},
{
id:1,
title:"V20",
titleTwo:"深感相机",
price:"3699",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2522069454.jpg"
},
{
id:2,
title:"IE80S",
titleTwo:"音乐耳机",
price:"2399",
image:"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2522778567.jpg"
},
{
id:3,
title:"IE60",
titleTwo:"入耳",
price:"799",
image:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2523516430.jpg"
}
],
globalData: {
userInfo: null
}
})
(2)pages/index/index.js文件代码
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
data: null
},
onLoad:function(option) {
var id=option.listid
this.setData({
data:app.goodsdata[id]
})
}
})
(3)pages/index/index.wxml文件代码
<!--index.wxml-->
<view class="goods">
<view class="title"><image src="{
{data.image}}"></image></view>
<view class="title">{
{data.title}}</view>
<view class="title">{
{data.titleTwo}}</view>
<view class="price">¥{
{data.price}}
</view>
</view>
(4)pages/index/index.wxss文件代码
/**index.wxss**/
.goods {
text-align: center;
}
.title {
font-size: 34rpx;
}
.price {
color: #f00;
font-size: 32rpx;
padding-top: 20rpx;
padding-left: 15rpx;
}
.box-demo {
display: flex;
flex-direction:column;
width:100%;
height:100rpx;
}
(5)pages/logs/logs.js文件代码
// logs.js
// 获取应用实例
var app = getApp()
Page({
data: {
goodsdata:null
},
onLoad() {
this.setData({
goodsdata:app.goodsdata
})
},
todetail:function(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
var list = e.currentTarget.dataset.id
console.log("你点击了第" + (listid + 1) + "个商品")
wx.navigateTo({
url: '../index/index?listid='+listid,
})
}
})
(6)pages/logs/logs.wxml文件代码
<!--logs.wxml-->
<view class="demo-box">
<block wx:for= "{
{goodsdata}}" wx:for-item="item">
<view class="goods-box" bindtap="todetail" data-id="{
{item.id}}">
<image class="goods-pic" src="{
{item.image}}"></image>
<view class="goods-title">{
{item.title}}</view>
<view class="goods-titleTwo">{
{item.titleTwo}}</view>
<view class="row">
<view class="goods-price">¥{
{item.price}}</view>
<text class="goods-btn">看相似</text>
</view>
</view>
</block>
</view>
(7)pages/logs/logs.wxss文件代码
/**logs.wxss**/
.demo-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 30rpx;
}
.goods-box {
width: 49%;
margin-bottom: 20rpx;
}
.goods-pic {
width: 220rpx;
height: 250;
margin: 0 auto;
display:block;
}
.row {
display: flex;
flex-direction: row;
justify-content:space-around;
}
.goods-btn {
border:1px solid #e3e3e3;
border-radius:20px;
margin-top:20rpx;
width:100rpx;
height:40rpx;
line-height:40rpx;
font-size:24rpx;
color:#aaa;
letter-spacing:2rpx;
text-align:center;
}
.goods-title {
font-size:30rpx;
font-weight:600;
text-align:center;
}
.goods-titleTwo {
font-size:24rpx;
margin-top:10rpx;
text-align:center;
}
.goods-price {
font-size:30rpx;
margin-top:20rpx;
color:#ee3b3b;
}
(8)页面效果
创建好项目后,在pages下新建一个login目录,右键login文件夹,选择新建page,创建login的page。
文件目录:
(1) pages/login/login.wxml文件代码
<!--pages/login/login.wxml-->
<view class="login-container">
<view class="title">微信小程序App</view>
<view class="login-box">
<label>用户名</label>
<input placeholder="请输入用户名"/>
<label>密码</label>
<input placeholder="请输入密码"/>
<button class="login-btn">立即登录</button>
<view class="three-line">一一一一一第三方登录一一一一一</view>
<button class="login-btn" style="background-color:green;">微信登录</button>
</view>
</view>
(1) pages/login/login.wxml文件代码
/* pages/login/login.wxss */
page{
height: 100%; /* 使用page的height可以使页面占全屏 */
background-color: #fafafa;
}
.login-container{
padding: 0 10%;
height: 100%;
}
.title{
font-size: large;
text-align: center;
padding-top: 10%;
font-weight: bold;
}
.login-box{
margin-top: 10%;
padding: 10% 5%;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px #888888;
}
.login-box>input{
margin: 5% 0 8% 0;
border-bottom: 1rpx solid lightgray;
}
.login-btn{
width: 100%!important;
background-color: #2f6afd;
color: white;
font-weight: normal;
}
.three-line{
margin: 8% 0;
text-align: center;
font-size: 12px;
color: gray;
}
页面效果:
文章浏览阅读3k次,点赞3次,收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容,也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件,将如下两处地方修改为。注意:ip地址必须反向书写,这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析
文章浏览阅读2.5w次,点赞16次,收藏103次。这个函数TIM_SetCompare1,这个函数有四个,分别是TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1
文章浏览阅读950次,点赞33次,收藏19次。多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例
文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置
文章浏览阅读689次,点赞7次,收藏8次。些项目时需要一个生成图片的方法,我在网上找到比较方便且适合我去设置一些样式的生成方式之一就是使用Freemarker,在对应位置上先写好一个html格式的ftl文件,在对应位置用${参数名}填写上。还记得当时为了解决图片大小设置不上,搜索了好久资料,不记得是在哪看到的需要在里面使用width与height直接设置,而我当时用style去设置,怎么都不对。找不到,自己测试链接,准备将所有含有中文的图片链接复制一份,在服务器上存储一份不带中文的文件。突然发现就算无中文,有的链接也是打不开的。_ftl格式pdf的样式调整
文章浏览阅读1.5k次,点赞6次,收藏12次。拉取librealsense。_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup error: /home/admin07/reals
文章浏览阅读3.4k次,点赞3次,收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中,当执行一段程序时,至少访问()次内存。A、1B、2C、3D、4在分段管理中,( )。A、以段为单位分配,每._系统抖动现象的发生由什么引起的
文章浏览阅读2.4k次。在实际的工作生产中,零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时,需要先确定所绘制图形要表达的内容,然后根据需要并按照视图的选择原则,绘制工程图的主视图、其他视图以及某些特殊视图,最后标注图形的尺寸、技术说明等信息,即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法,清晰完整地表达出零件的结构形状,并便于看图。确定工程图表达方案的一般步骤如下:口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图
文章浏览阅读920次,点赞29次,收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。
文章浏览阅读2w次,点赞38次,收藏102次。在服务器端,socket()返回的套接字用于监听(listen)和接受(accept)客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求,并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa
文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则,这些规则并不限用于.NET Framework或C#语言;这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁,对象不可恢复。对象不能被再次激活,调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y,那么x的Disp_c# 销毁对象及其所有引用
文章浏览阅读1.1w次。这是记录,在中项、高项过程中的错题笔记;https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时,可以利用PERT图和甘特图;访谈时,可以应用各种调查表和调查提纲;在确定各部门、各层管理人员的需求,梳理流程时,可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来,说明每个过程与组织的联系,指出过程决策人,可以采用建立过程/组织(Process/Organization,P/O)矩阵的方法。例如,一个简单的P/O矩阵示例,其中._大型设备可靠性测试可否拆解为几个部分进行测试