制作手机静态页面

最新推荐文章于 2022-05-22 18:04:16 发布

原创最新推荐文章于 2022-05-22 18:04:16 发布 · 4.8k 阅读

CC 4.0 BY-SA版权

本文介绍了如何制作适应手机屏幕的静态页面，包括引入库、设置手机适应屏幕、调整元素大小和间距、设置背景图片以及实现手机发送验证短信的功能。同时，文章还涉及到按钮点击后的置灰和倒计时效果，以及用户注册过程。最后，讨论了微信分享的配置和Google Analytics的使用，以跟踪页面点击和错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入库(百度cdn):

引入bootstrap <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" type="text/css">

引入jquery <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.手机适应屏幕：

body {
margin:0px;
height: 100%;
width: 100%
}

3.大小，间隔距离用百分比：

.main_background .user_field{
margin-left:auto;
margin-right:auto;
text-align:left;
width:100%;
height: 10%;
font-family:"幼圆";
text-align: center;
}

.first_div .photo_field div{
width: 100%;
height: 100%;
}

.first_div .photo_field div img{
width: 30%;
height: 60%;
float:left;
margin-left: 2.5%;
}

4.背景图片:

.background_div{
background: url(http://cdn.a0.bnbtrip.com/assets/images/web/2016/04/main_background.jpg) no-repeat;
cursor: pointer;
border: none;
width: 100%;
height: 70%;
background-size: cover;
background-position:center;
}

.box_2{
position:absolute;
width: 300px;
left:50%;
height:250px;
background: url(http://cdn.a0.bnbtrip.com/assets/images/web/2016/04/smile.png) no-repeat;
background-size: cover;
background-position:center;
}

5.手机发送验证短信（ajax）：

点领取按钮领取验证码（ajax），向send_code（action）API发送data数据，即send_code动作内所要用到的params的数据， ajax请求服务器返回类型是dataType:'json'时，则返回render json: json_response('time limit error', 400, [flash[:error]]) and return，通过 success:function(data)回调函数的data接受send_code的返回值, 来判断返回状态，可以在action中判断不同情况来返回不同status的状态来表示是否由错误（比如返回status:401则表示用户名已注册）

tourism_activity.html.erb中：

$(".button").click(function(){
var phone = $("#first_input").val();
var reg = /^1[3458]\d{9}$/;
if (!reg.test(phone)){
layer("手机号格式不符");
return;
}
$.ajax({

dataType:'json',
type: 'post',
url: '/users/send_code',
cache: false,
data:{
phone: phone,
platform: 'web'
},
success:function(data){
time($(".button"));
if (data.meta.status == 400){
layer("该用户名已注册");
return;
}
}
});
});

user_controller.rb中的send_code（发送短信的按钮（ajax）即向该controller中的action（send_code）发送请求）：

def send_code

phone = params[:phone]
country_code = params[:country_code] || "+86"

if params[:platform] != "web"
unless RequestSign.check_sign(params, "register_code")
flash[:error] = "args_and_sign_error"
render json: json_response('args error', 500, [flash[:error]]) and return
end
end

if Authentication.phone_register?(phone, country_code)
flash[:error] = I18n.t("error.tips.phone_is_already_register")
render json: json_response(I18n.t("error.tips.phone_is_already_register"), 400, [flash[:error]]) and return
end

verification = Verification.find_by(category: "phone", body: phone, country_code: country_code)
if verification.present?

unless verification.phone_code!
flash[:error] = "time_limit_error"
render json: json_response('time limit error', 400, [flash[:error]]) and return
end

else
verification = Verification.create(category: "phone", body: phone, phone_code_at: Time.now, phone_code: rand(1000..9999), country_code: country_code)
end

set_locale_by_country_code(country_code)

message = I18n.t "message.user.send_register_code", code: verification.phone_code

if message_id = BnbSms.send_to(phone, message, country_code)
verification.update(message_id: message_id)
render json: {meta: {status: 200}, data: {}}, status: 200
else
flash[:error] = I18n.t("error.tips.send_code_failed")
render json: json_response(I18n.t("error.tips.send_code_failed"), 401, [flash[:error]])
end
end

点击按钮发送短信后进行按钮的置灰和60秒倒计时，即time函数在按钮的click事件后success:function回调函数中进行调用（jquery）:

$(".button").click(function(){
var phone = $("#first_input").val();
var reg = /^1[3458]\d{9}$/;
if (!reg.test(phone)){
layer("手机号格式不符");
return;
}
$.ajax({
type: 'post',
url: '/users/send_code',
cache: false,
data:{
phone: phone,
platform: 'web'
},
success:function(data){
time($(".button"));
if (data.meta.status == 400){
layer("该用户名已注册");
return;
}
}
});
});

6.如果手机验证码核对正确，且密码手机号的格式都正确则进行用户注册，相当于ajax向user_controller.rb中的create动作发送请求传递data即create中params的参数，请求返回dataType: 'json', 通过create中的render :json来返回数据进行判断，但本例中是将user_controller.rb中的create代码复制到了static_pages.rb中photo_registered动作中因为只做手机web所以要精简一些代码：

tourism_activity.html.erb中：

<div class="user_field" id="post_field">
<button class="post_botton">一键领取大礼包</button>
</div>

$(".post_botton").click(function(){
var phone = $("#first_input").val();
var code = $("#second_input").val();
var password = $("#third_input").val();
var reg = /^1[3458]\d{9}$/;

if (password.length < 6)
{
layer("密码少于6位");
return;
}

if (!reg.test(phone)){
layer("手机号格式不符");
return;
}

$.ajax({
type: 'post',
url: '/static_pages/photo_registered',
cache: false,
dataType:'json',
data:{
user: {phone: phone, password: password},
code: code,
register_type: "phone"
},
success:function(data){
var phone = $("#first_input").val();
if (data.meta.status == 400){
layer("该用户名已注册");
return;
}
if (data.meta.status == 401){
layer(data.errors);
return;
}
if (data.meta.status == 406){
layer("该用户名已注册");
return;
}
if (data.meta.status == 402){
layer("该用户名已注册");
return;
}
if (data.meta.status == 200){
layer_2(phone);
return;
}
}
});
});

static_pages_controller.rb中：

def photo_registered

@meta_description = '趣住啊旅游月HIGH翻天'

if params[:register_type] == "phone"

country_code = params[:country_code] || "+86"
phone = params[:user][:phone]
verification = Verification.find_by(body: phone, country_code: country_code)

if Authentication.phone_register?(phone)
render json: json_response("phone_already_register_error", 406, ["errors"]) and return
end

if User.find_by_phone(params[:user][:phone]).present?
render json: json_response("phone_already_register_error", 406, ["errors"]) and return
end

if Authentication.find_by(uid: phone, provider: "phone", country_code: country_code).present?
flash[:error] = I18n.t("error.tips.already_register_error")
render json: json_response(I18n.t("error.tips.already_register_error"), 400, [flash[:error]]) and return
end

if verification && verification.check_code(params[:code], :phone_code, country_code)
@user = User.create(phone_params)
if @user.save
@user.authentications.create(provider: "phone", uid: phone, country_code: country_code)
verification.update(user_id: @user.id)

@user.check_invitation!

end
else
flash[:error] = I18n.t("error.tips.phone_code_error")
render json: json_response(I18n.t("error.tips.phone_code_error"), 401, [flash[:error]]) and return
end
elsif params[:register_type] == "email"

email = params[:user][:email]

auth = Authentication.find_by(provider: "email", uid: email)

# if email is used by other people #TODO
if auth.present?
flash[:error] = I18n.t("error.tips.email_had_already_registed")
render json: json_response(I18n.t("error.tips.email_had_already_registed"), 403, [flash[:error]])
return
end

@user = User.new(user_params)
end

@user.first_name = '_'
@user.last_name = '_'
if @user.save!
auto_login(@user)

@user.user_coupons.create(coupon_id: 2)

# when register from app
if params[:platform].present?
@user.check_marketing_user
@authentication_token = @user.make_token(token_params)
end

if params[:register_type] == "email"
@user.email = params[:user][:email]
end

respond_to do |format|
format.html { render nothing:true }
format.json { render json: json_response('ok', 200) }
end
else
respond_to do |format|
format.html { render nothing: true }
format.json { render json_error('signup error', 402, @user.errors.messages.to_a.map {|t| t[0].to_s + ': ' + t[1].join(', ')}) }
end
end
end

7.微信中的分享（js）网上可以查到（即微信分享的js代码）：

相关介绍网页地址：

https://open.weixin.qq.com/

a.在head中引入该js文件

b.在js代码中加入,description的值@meta_description是在action中定义的（ var description = "<%= @meta_description %>";）:

window.weixin_data = <%= raw BnbWeixin.get_sign(request.url).to_json %>;

8.使用Google Analytics跟踪捕获js， angularjs， jquery在线错误和异常（也可以探测网页的实时点击量等）

使用参考文章地址：

http://www.google.cn/intl/zh-CN_ALL/analytics/index.html

http://jingyan.baidu.com/article/359911f572d91957fe03062d.html

http://ourjs.com/detail/54f6b500232227083e00003c?utm_source=tuicool&utm_medium=referral

本例中是在tourism_activity.html.erb中<body>标签内的底部（注意是<body>标签内, 的底部）来检测点击量等.

<% if Rails.env.production? %>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-70873760-1', 'auto');
ga('send', 'pageview');
</script>
<% end %>

</body>

9.图片链接：

10.手机看本地页面：

a.启动本地rails s服务，并监听所有IP地址（0.0.0.0-255.255.255.255）

rails s -b 0.0.0.0

b.用手机和电脑在一个局域网， ifconfig查本机ip地址，然后手机网址中输入ip:3000/sss/sss

也就是电脑的ip地址+端口号3000+url路径（http://localhost:3000/manage/rooms如果是这个则url路径就是/manage/rooms，这里http://localhost相当于127.0.0.1也就是本地回环，手机上电脑的web服务相当于访问电脑的IP地址也就是：ip:3000/sss/sss）