技术标签: 经验分享 微信公众平台 微信小程序 微信开放平台 微信
《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社
目录
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;
}
页面效果:
文章浏览阅读2.8k次。AndroidStudio 升级到 4.2.2 版本后,没有代码高亮了,很蛋疼。解决办法是:点开上方的 File,先勾选 Power Save Mode 再取消就可以了。_android studio 高亮
文章浏览阅读1k次。使用swift4.0整合Unity出现[ valueForUndefinedKey:]: this class is not key value coding-compliant for the key unity.'在对应属性前加@objc 即可。或者调回swift3.2版本_forundefinedkey swift4
文章浏览阅读1.3k次。http auto-config="true" access-denied-page="/common/403.htm"> intercept-url pattern="/login.**" access="IS_AUTHENTICATED_ANONYMOUSLY"/> form-login login-page="/login.jsp" defau_springsecurity 设置cookie失效时间
文章浏览阅读1.1k次。继上篇内部拦截法需求还是跟上篇一样。只不过这次用外部拦截法来解决;只要在父容器添加如下代码就可以解决了滑动冲突,很简单,套模板就行 // 分别记录上次滑动的坐标(onInterceptTouchEvent) private int mLastXIntercept = 0; private int mLastYIntercept = 0; @Override public bo_viewpage2外部拦截事件
文章浏览阅读2.5k次,点赞7次,收藏9次。本文章系作者原创,未经许可,不得转载。汇编 堆栈 变量存储 指针先说栈的概念,栈其实也是一种。。。。。先说内存的概念吧。。。。。额 先说计算机吧,简单来说的话,可以把计算机理解成由CPU,内存,硬盘组成,而CPU内部又包括一种叫做内部寄存器的东西,包括 数据寄存器: AX,BX,CX,DX; 段寄存器: CS,DS,ES,SS; 指针与变址寄存器SP,BP,SI,DI; ..._汇编语言栈指针
文章浏览阅读1w次,点赞14次,收藏56次。转载自 架构师之路:从码农到架构师你差了哪些 Web应用,最常见的研发语言是Java和PHP。 后端服务,最常见的研发语言是Java和C/C++。 大数据,最常见的研发语言是Java和Python。 可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。有..._web架构师
文章浏览阅读7.3k次,点赞6次,收藏36次。超级简单的Python爬虫入门教程(非常详细),通俗易懂,看一遍就会了_爬虫python入门
文章浏览阅读1.2k次。您的代码存在一些问题。首先,您在此处显示的两个模型是not等效的:尽管您将scikit-learn LogisticRegression设置为fit_intercept=True(这是默认设置),但您并没有这样做statsmodels一;来自statsmodels docs:默认情况下不包括拦截器,用户应添加。参见statsmodels.tools.add_constant。另一个问题是,尽管您处..._sm fit(method
文章浏览阅读518次。一、sfml官网下载32位的版本 一样的设置,64位的版本我没有成功,用不了。二、三、四以下这些内容拷贝过去:sfml-graphics-d.libsfml-window-d.libsfml-system-d.libsfml-audio-d.lib..._vsllfqm
文章浏览阅读2.7k次。由于工作需要,要做一个类似bc2的文本比较工具,用红色字体标明不同的地方,研究了半天,自己写了一个简易版的。文本比较的规则是1.先比较文本的行数,2.再比较对应行的字符串的长度3.再比较每一个字符串是否相同。具体代码如下:其中m_basestr和m_mergestr里面存放是待比较的字符串int basecount=m_basestr.GetLength(); int mergec_byoned compare 字符串比较算法
文章浏览阅读79次。xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">org.apacheapache174.0.0org.apache.atlasapache-atlas3.0.0-SNAPSHOTMetadata Management and Data Govern..._atlas.pom
文章浏览阅读1.5k次。C语言中有可以产生随机数据的函数,需要添加 stdlib. h头文件与time.h头文件。首先在main函数开头加上“ srand(unsigned)time(NULL));",这个语句将生成随机数的种子(不懂也没关系,只要记住这个语句,并且知道 srand是初始化随机种子用的即可)。然后,在需要使用随机数的地方使用 rand()函数。下面是一段生成十个随机数的代码:程序代码:#incl..._随机数