微信小程序(一),授权页面搭建

wxml代码如下:

<!--pages/index2/index2.wxml-->
<view class="index2Container">
<image class="avatar" src="/static/images/y.jpg"></image>
<text class="username">hello 微信小程序</text>
<view class="goStudy">
<text class="test">开启小程序之旅</text>
</view>
</view>

wxss样式代码如下:

/* pages/index2/index2.wxss */
page{
height:100%;
background:#8ED145;
}
/* .indexContainer{
display: flex;
flex-direction: collumn;
} */

.index2Container{
display: flex;
flex-direction: column;
align-items:center;
}

.avatar{
width:200rpx;
height:200rpx;
border-radius:100rpx;
margin:100rpx 0;
}
.username{
font-size:32rpx;
font-weight:blod;
margin:100rpx 0;
}
.goStudy{
width:220rpx;
height:80rpx;
font-size:28rpx;
border:1rpx solid #999;
border-radius:10rpx;
align-items:center;
line-height:80rpx;
}
.test{
margin-left: 15rpx;
}

button{
font-size:32rpx;
border:1px solid #999;
background:#8ED145;
}

原文地址:https://www.cnblogs.com/ly-520/p/10268794.html

时间: 2024-11-01 23:07:07

微信小程序(一),授权页面搭建的相关文章

微信小程序的开发环境搭建(Windows版本)

前言: 小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是并行的体系.2017年1月9日,微信小程序正式上线. 本篇博文就网上资料及相关教程整理一下,希望对想要进行小程序开发的小白提供一下帮助. 第一步:想要进行微信小程序开发,必须有自己的微信开发者账号,在这里博主提供一下微信公众平台的链接:https://mp.weixin.qq.com (万恶的腾讯家,竟然还要一个新的邮箱来

微信小程序(2)——新建页面

在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入"pages/index/index" 后,小程序的编辑工具会自动在根目录建立 pages文件夹 index文件夹 index命名的.js  .json  .wxss  .wxml 文件  app.json介绍 app.json是每个小程序必有切唯一的. 使用app.json文件来对微信小程序进

微信小程序--更改启动页面

在微信小程序中,如果想把子页面设置成打开程序的第一眼页面而不是首页,只需要在公共json文件中的pages里面的第一位设置成你想要的页面路径即可: "pages":[ "pages/index/index",//把要放在启动第一位显示的页面路径放在此处. "pages/logs/logs", "pages/news/news", "pages/products/products", "pages/

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

关于微信小程序拒绝授权后,重新授权并获取用户信息

最近公司做了一些有关微信小程序的项目,涉及到授权获取用户基本信息,但是在拒绝授权之后就不会再出现授权窗口: 看网上也有很多人遇到了同样的问题,所以记录下来我的处理方法,供大家和自己学习和记录: 当调用小程序 wx.getUserInfo(OBJECT) 获取用户基本信息时,需要用户进行授权操作,如果用户点击了拒绝,则再次调用该方法就不会出现对应的授权窗口,很是让人困惑: 找了许久,最后让我发现了它:------> wx.openSetting(OBJECT),下面让我们认识一下: wx.open

微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a=1&b=2" }) // 目标页面B相关代码 Page({ onLoad: function (options) { var a = options.a; // 值:1 va

微信小程序 跳转页面

1.wx.navigateTo  跳转页面(不销毁当前页面) wx.redictTo跳转页面(销毁当前页面会触发onUnload事件)wx.switchTab只能跳转tab页面(tab页面之前的页面全部销毁触发onUnload事件) 2.微信小程序页面分为普通页面跟tab页面  tab页面需要在app.json中设置,默认页面下面有导航栏(最高优先级) 3.unload事件是在页面销毁之后触发 原文地址:https://www.cnblogs.com/gpzhen/p/11603464.html

微信小程序跳转页面时参数过长导致参数丢失

问题描述: 微信小程序:跳转页面时传参,参数过长导致参数丢失 跳转到文章详情页时,使用的文章链接e.currentTarget.dataset.id过长导致参数丢失 handleClickArticle: function (e) { wx.navigateTo({ url: '/pages/index/articleinfo/articleinfo?urllink=' + e.currentTarget.dataset.id }) }, 解决方案: 调用微信的API,将参数编码传送,解码接收,

完整且易读的微信小程序的注册页面(包含倒计时验证码、获取用户信息)

目录 1.页面展示 2.wxml代码 3.wxss代码 4.js代码 1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id=

微信小程序--常用的页面传值方式

记录小程序中常用的几种页面传值方式 一.storage wx.setStorage({ key: "key", data: value }) 通过getStorage回调方式获取data值,或者通过wx.getStorageSync(key) 同步获取key对应的data值 #### 二.url传值 url传值也是经常都能用到的 ##### 1.url传递通过字符串拼接传递key=value形式的参数 wx.navigateTo({ url: '/pages/index/index?i