asp 小程序微信开发
2016-10-26 11:13:14 u013803499 阅读数 2622

前期小程序开发只进行到根据微信用户登录获取的code 去微信的API去获取到该用户的openId和session_key,到了第二阶段,老大让我重写OAuthManager的代码来实现微信小程序和微信公众号平台获取用户信息的优化,即将OAuthManager重写成父类抽象类,微信小程序(WechatAppManager)和微信公众号(PublicAccountMananger)来继承并开发,具体方法不赘述。。。

在开发微信小程序的时候,由于对于需求的不理解,导致半天都发在获取用户信息的方法上,由于微信小程序没有access_token,所以,用户信息只能从前台发出,后台负责接收并封装JSON格式的用户信息。。。

在这里,我要重点阐述我在发送JSON信息时候所遇到的低级错误!!!

1.发送JSON格式信息,需要Headers添加

Content-Type:application/json

后台始终接收不到,就因为少了一个这个headers,接着因为JSON的格式是

{
    "code": "CODE",
    "wechatAppUserInfo": {
        "errMsg": "getUserInfo:ok",
        "rawData": "{\"nickName\":\"NICKNAME\",\"gender\":0,\"language\":\"LANGUAGE\",\"city\":\"CITY\",\"province\":\"PROVINCE\",\"country\":\"COUNTRY\",\"avatarUrl\":\"AVATARURL\"}",
        "signature": "SIGNATURE",
        "encryptData": "ENCRYPTDATA"
    }
}

请注意好JSON格式,格式错了也是发不过去的,可以上网在线监测自己的JSON格式,后台接收的时候,我出于方便的目的,用dto的形式接收将json数据封装成一个dto,直接接收

public String getSessionByCode(@RequestBody WechatAppUser wechatAppUser, HttpServletRequest request)

WechatAppUser里只有两个属性(code , wechatAppUserInfo(wechatAppUserInfo)是一个封装类)
我将rawData和encryptData也进行了封装。。。

经过一系列的封装,反序列化之后,我们需要将encryptData数据进行解密,这个解密的过程让我心焦。。。
整了两天才发现原来是自己的数据出问题。。。
加密数据解密算法

接口如果涉及敏感数据(如wx.getUserInfo当中的 openid ),接口的明文内容将不包含敏感数据。开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptData )进行对称解密。 解密算法如下:

1.对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充。
2.对称解密的目标密文为 Base64_Decode(encryptData),
3.对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节
4.对称解密算法初始向量 iv = aeskey, 同样是16字节 

上网各种百度该解密算法,让我在千万条链接中找到了它
http://blog.csdn.net/aflight/article/details/13626385
这个链接的key和iv是自动生成的,需要自己手动修改代码(iv的生成需要传入session_key转化的byte[])

//生成iv
    public static AlgorithmParameters generateIV(byte [] iv) throws Exception{
        //iv 为一个 16 字节的数组,这里采用和 iOS 端一样的构造方法,数据全为0
        AlgorithmParameters params = AlgorithmParameters.getInstance(KEY_ALGORITHM);
        params.init(new IvParameterSpec(iv));
        return params;
    }

    //转化成JAVA的密钥格式
    public static Key convertToKey(byte[] keyBytes) throws Exception{
        SecretKey secretKey = new SecretKeySpec(keyBytes,KEY_ALGORITHM);
        return secretKey;
    }

解密的代码

byte[] data = WechatAppDecryptor.decrypt(wechatAppUser.getWechatAppUserInfo().getEncryptData(),
                oAuthResult.getSession_key());
            logger.debug("解密得到的数据 : " + new String(data,"UTF-8"));
            wechatAppUser.getWechatAppUserInfo().setEncryptDatas(CacheUtil.doJacksonDeserialize(new String(data,"UTF-8"),EncryptData.class));

灰常好,这里我们就可以得到微信用户的基本信息以及最重要的unionId
UnionID机制说明:

如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

简而言之就是根据这个字段,用户在数据库中只会存在一条数据!!!

encryptData 解密后为以下 json 结构

{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": 1,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID"
}
2018-07-23 16:52:03 weixin_42769049 阅读数 225

快速开发一个自己的微信小程序

一.写在前面

小程序学习资料

1.为什么要学小程序开发?

对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。

2.开发准备:

(1)有人开玩笑说,会vue小程序根本都不用学:

微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的哦~

(2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。

具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目哦

撸起袖子开干了

一.注册小程序账号,下载IDE

1.官网注册https://mp.weixin.qq.com/,并下载IDE。

2.官方文档一向都是最好的学习资料。

注意:

(1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。

(2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid哦。

二.小程序框架介绍和运行机制

1.我们建立了“普通快速启动模板”,然后整个项目目录如下:

2.app.js

整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。

globalData是定义整个项目的全局变量或者常量哦。

3.app.json

整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面标题等等;

!注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面哦。

4.pages

小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs

5.打开index目录

可以看到有三个文件,其实和我们web开发的文件是一一对应的。

index.wxml对应index.html;

index.wxss对应index.css;

index.js就是js文件哦。

一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能

6.双击index.js文件

(1)var app = getApp();

引入整个项目的app.js文件,用来取期中的公共变量等信息。

如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到哦。

(2)比如,我们要获取豆瓣电影的时候,我们需要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到这个值。

当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中哦。

(3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react哦~

通过setData修改data数据,驱动页面渲染

(4)一些生命周期函数

比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等

更多的可以查官网API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)

7 .wxml模板的使用。

比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。

star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

8.常用的wxml标签

view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

三.小程序框架、各个页面以及发布上线的注意点

1.整个框架中的一些注意点

(1)整个wxml页面,最底层的标签是哦。

(2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置哦。

(3)json中不能写注释哦,不然会报错的。

(4)路由相关

1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效哦。

注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。

2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。

3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。

(5)页面之间传递参数

参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

(6)data-开头的自定义属性的使用

比如wxml中我们怎么写

点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

注意: 大写会转换成小写,带_符号会转成驼峰形式

(7)事件对象event,event.target和event.currentTarget的区别:

target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

(8)使用免费的网络接口:

本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的

注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上哦

附上一个免费接口大全:

https://github.com/jokermonn/-Api

!!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的

(8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。

把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦

2.切换城市页面:

(1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。

正确的处理逻辑如下:

1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。

2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。

3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。

(2)城市列表的滚动和回到顶部

基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部

3.天气页

(1)初始化页面,天气显示的逻辑

首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,

再调用查询天气和空气质量的方法哦。

(2)容错处理

城市的名称长短不一,有点名字特别长,比如巴彦淖尔市这种,需要动态的获取完整的城市名称;

有些偏僻的城市暂时没有天气信息,我们需要对返回的结果进行判断,没有信息的需要给用户一个良好的提示信息。

4.周边-地图服务页面

(1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档

(2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态

然后wxml再根据数据来动态添加class,增加边框样式

5.豆瓣电影页

(1)电影详情页的预览图片,用小程序本身的previewImage实现。

(2)详情页使用onReachBottom()方法,监控用户上拉触底事件,然后发送请求继续获得数据,实现懒加载的效果

(3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”

(4)搜索之后清空搜索框

因为小程序中不能使用getelementbyId这种方式获得元素,只能用数据来控制了

在data中加一个属性searchText来保存搜索框的内容并和 input的value属性绑定,搜索完成或者点击X时,searchText变量清空即可实现清空输入框的效果哦。

6.新闻页面

(1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。

我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~

(2)当然,也可以自己去爬新闻网站的数据哦

7.更多页面

(1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的哦。

(2)彩蛋页面,获得用户信息

通过 wx.setStorageSync(‘userInfos’, userInfos); 可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析

我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

8.发布注意

(1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片

具体怎么把本地图片变成网络图片,上面有讲哦。

(2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块–开发版本就有了内容。

(3)点击提交,填写小程序相关信息,就可以提交审核了哦。

注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的

至此,我就把两天开发内碰到的坑和注意点都过了一遍,据说还有更多的坑,等之后更深入的开发再继续研究咯。

扫码向博主提问

LIBINXIE

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • Android
  • java
  • web网页 
    <div class="article-bar-bottom">
            <div class="article-copyright">
        版权声明:未经作者同意,不得转载,否则必究责任。作者联系方式QQ:498638708          https://blog.csdn.net/LIBINXIE/article/details/81145526     </div>
                    <div class="tags-box artic-tag-box">
        <span class="label">文章标签:</span>
                    <a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=小程序&amp;t=blog" target="_blank">小程序                       </a>
    </div>
                    <div class="tags-box">
        <span class="label">个人分类:</span>
                    <a class="tag-link" href="https://blog.csdn.net/libinxie/article/category/7823301" target="_blank">小程序                      </a>
    </div>
                            <div class="tags-box hot-word">
        <span class="label">相关热词:</span>
                    <a class="tag-link" href="https://blog.csdn.net/chidy/article/details/52297479" target="_blank">
        快速开发            </a>
                    <a class="tag-link" href="https://blog.csdn.net/qianduankuangjia/article/details/78042944" target="_blank">
        前端快速开发          </a>
                    <a class="tag-link" href="https://blog.csdn.net/jumtre/article/details/51955329" target="_blank">
        原型快速开发          </a>
                    <a class="tag-link" href="https://blog.csdn.net/qq_34316044/article/details/80264173" target="_blank">
        人人快速开发          </a>
                    <a class="tag-link" href="https://blog.csdn.net/JavaNotes/article/details/79479353" target="_blank">
        公众号快速开发的            </a>
                </div>
        </div>

<!-- !empty($pre_next_article[0]) -->
    </div>
2016-09-14 09:31:51 weixin_33795833 阅读数 26

由于公司无法使用微信,网盘等一些云类同步软件,就算只是想将手机上一段文字亦或是一个图片上传到电脑端也只能是通过邮件的方式来传送,当比较频繁的时候一会一封邮件还是比较麻烦,想要一个简单直观的方法满足这个小需求。于是就想到通过微信公众平台来实现,将一段文本或者图片通过微信公众账号上传,最后通过电脑访问,简单写了个雏形,如下图:

实现了简单功能:

  1. 向公众账号发送文本以及图片,返回访问链接;

  2. 图片直接下载到本地存储,以时间戳命名图片;

  3. 数据通过JSON文件的存储方式保存,可以查看近期所有发送的文本或图片;

功能比较简单,全部代码130+行。基本没有什么前台,通过拼接字符串的方式写的HTML;也基本没有什么后台,整体使用的是expressWeb框架,微信交互使用的wechat模块;下载图片使用的download模块。

这里先简单介绍一下实现的细节,首先,以/根目录接受微信的信息,如下代码:

app.use('/', wechat(config, function(req,res,next){
  var message = req.weixin;
  console.log(message);
  var FromUserName = message.FromUserName;
  var CreateTime = new Date().getTime();
  var file = path.join(process.cwd(), '/.data/.', FromUserName);
  var data = {};

  // 每一条信息保存时间,字段为CreateTime
  data.CreateTime = CreateTime;

  switch (message.MsgType){
    case 'text':
      var Content = message.Content;
      data.text = Content;  // 当为文本内容的时候,保存text字段
      storeData(file,data,function(result){
        if(result == 'success'){
          res.reply("请在浏览器中访问:http://pengloo53.eicp.net/user/" + FromUserName);
        }else{
          res.reply(result);
        }
      });
      break;
    case 'image':
      var PicUrl = message.PicUrl;
      var picName = new Date().getTime() + '.png';
      var imagePath = path.join(process.cwd(), '/.data/dist/' , picName);
      data.image = picName; // 当为图片内容的时候,保存image字段(时间戳命名)
      downloadPic(PicUrl, imagePath ,function(result){
        if(result == 'success'){
          storeData(file,data,function(result){
            if(result == 'success'){
              res.reply("图片上传成功,请在浏览器中访问:http://pengloo53.eicp.net/user/" + FromUserName);
            }else{
              res.reply(result);
            }
          })
        }
      });
      break;
    default:
      res.reply('欢迎使用showshow小工具,请输入文本或是图片!');
  }
}));

这里只是实现了text以及image的微信消息类型,也就是只接受并处理文字信息以及图片信息;每一条消息为一个对象,通过键值对来保存数据,一个CreateTime,一个textimage;每一个消息当做一个对象push到数据数组中保存,最终以JSON的方式保存到文件中,每一个用户对应一个数据文件,代替数据库的功能。实现代码如下:

// 初始化数据
function initData(file,callback){
  fs.stat(file, function(err){
    if (err){
      callback([]);
    }else{
      var content = [];
      fs.readFile(file,'utf8',function(err,result){
        if(err){
          callback([]);
        }
        content = JSON.parse(result.toString() || []);
        callback(content);
      });
    }
  });
}

// 插入新的数据,保存到本地
function storeData(file, data, callback){
  initData(file,function(result){
    result.push(data);
    fs.writeFile(file, JSON.stringify(result), function(err){
      if(err){
        callback(err);
      }else{
        callback('success');
        console.log('store success.');
      }
    });
  })
}

最后浏览器以GET请求获取信息,以达到数据传输到PC端的目的。定义一个GET路由,指定路径为/user/:id,id即为微信用户的Open ID;

app.get('/user/:id', function(req,res,next){
  var pathname = url.parse(req.url).pathname;
  var match = pathname.match(/^\/user\/(.+)/);
  if (match){
    var username = match[1];
    var file = path.join(process.cwd(), '/.data/' , username);
    var pageContent = '';
    initData(file,function(result){
      for(var i = result.length -1 ; i >= 0 ; i--){
        var dateDisplay = new Date(result[i].CreateTime * 1);
        var text = result[i].text;
        var image = result[i].image;
        pageContent += '<h2>' + dateDisplay.toLocaleString() + '</h2>';
        if(text){
          pageContent += '<p>' + text + '</p>';
        }else{
          pageContent += '<p><a href="/'+ result[i].image +'"><img src="/'+ result[i].image +'" width="600px"></a></p>';
        }
        pageContent += '<hr/>';
      }
      res.send(pageContent);
    });
  }
});

以倒序的方式显示消息,最终显示如上图,页面比较简单,后续想通过jade模板引擎写个漂亮的前台页面。

源代码:Node_note/showshow.js,写得不好请指正。

现在可以关注一下这个公众账号体验一下效果。如果有Bug或者服务器无法响应,请见谅(家里Mac mini担当的服务器,或许已经不在提供服务)。

2018-05-04 18:01:06 LVXIANGAN 阅读数 2186

flex布局用途:快速实现你所需要的布局(水平居中、垂直居中、左右对齐等) 

居中布局实现:

1、对布局容器设置display:flex; 

2、利用属性(justify-content(水平方向)和align-items(垂直方向))进行设置。

例如垂直居中:

/* wxml */
<view class="classname">
    <text>测试用小玩意儿</text>
</view>


/* wxss */
view{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}


将align-items改成justify-content

/* wxml */
<view class="classname">
<text>测试用小玩意儿</text>
</view>


/* wxss */
view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}


两个属性一起来

 

 常用场景不止居中布局,还有很多,但一讲起来篇幅难免太长,这里用文字带过。

1、flex-direction:改变轴线方向,

row 水平轴线,默认
column 垂直轴线。
(轴线举例:父级元素使用flex布局,默认布局下块级元素是会换行的,但设置了flex布局后默认就都水平排列了) 

2、justify-content:设置水平方向

3、align-items:设置垂直方向。可用属性参考justify-content 

4、flex-wrap:子元素溢出处理。

nowrap 不换行
wrap   顺序换行 
wrap-reverse 逆序换行






Flex布局又称弹性布局,在小程序开发中比较适用。因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了。

网页布局(layout)是CSS的一个重点应用。

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

四、项目的属性


以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: <integer>;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。






微信小程序的左右布局

微信小程序的在同一行有一个控件放在左边,另一个控件放在右边,可以利用来wxss作实现:demo.wxml代码如下:

<view class="container">
  <text class="left">左边的文本</text>
  <text class="right">右边的文本</text>
</view>

demo.wxss代码如下:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.left {
  font-family: "黑体";
  color: #888;
  font-size: 40rpx;
}

.right {
  font-family: "楷体";
  color: #ff0000;
  font-size: 80rpx;
}

运行的效果图如下:




text(文字)对齐:

方法1:找到文字的id或class,设置css中的text-align:left (元素居左)或者right:居右。


方法2:我们在一个View中加入了元素,这里我们举例比如是text

[plain] view plain copy
  1. <view class='viewclass'>  
  2.     <text class='viewview'>asdfasdf</text>  
  3. </view>  

基本的样式如下,为了方便查看,我们使用一个外边框来显示

  1. .viewclass{  
  2.   height300px;  
  3.   width300px;  
  4.   bordersolid 1px black;  
  5. }  

这里显示的效果如下


想要实现text的垂直居中 将css修改为

  1. .viewclass{  
  2.   height300px;  
  3.   width300px;  
  4.   bordersolid 1px black;  
  5.   display: flex;  
  6.   flex-direction: column;  
  7.   justify-contentcenter;  
  8. }  

想要实现text的水平居中 将css修改为

  1. .viewclass{  
  2.   height300px;  
  3.   width300px;  
  4.   bordersolid 1px black;  
  5.   display: flex;  
  6.   flex-direction: row;  
  7.   justify-contentcenter;  
  8. }  



转自:https://www.cnblogs.com/tdalcn/p/7092800.html

https://blog.csdn.net/chinaboyliusir/article/details/54342874

https://blog.csdn.net/no1francis/article/details/79310566

2018-05-03 17:46:13 ssh456 阅读数 302

首先申请一个小程序,打开开发文档进行开发

先创建登录页面的文件夹如下所示


之后开始搭建页面,在login.wxml文件中

代码如下,具体的标签可以参考微信开发小程序的文档介绍

<view class='container'>
<view class='header'>
<text>评教系统——学生端</text>
</view>
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class='section'>
    <text>学号:</text>
    <input type='number' name='no' value='1635050222' placeholder='请输入学号' />
  </view>
  <view class='section'>
    <text>密码:</text>
    <input password='true' name='pwd' value='123456' />
  </view>
  <view class='section'>
  <button type='primary' form-type='submit'>登录</button>
  </view>
</form>
  
</view>

在login.wxss文件中设置样式

.header{
  font-weight: bold;
}
form{
  width: 100%;
  /* border: solid 1px #0f0;  */
}
.section{
  margin: 50rpx auto;
}
input{
  height: 100rpx;
  border: solid 1px #ccc;
}

接下来就是表单提交时发出的事件,在login.js文件中

formSubmit:function(e){
    // console.log(e.detail.value);
    wx.request({
      url: 'https://www.zhangsan.top/pingjiao/index.php/student/api/login', //仅为示例,并非真实的接口地址
      data: {
        username:e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        // console.log(res.data)
        //缓存
        wx.setStorage({
          key: "student",
          data: res.data
        });
        //页面跳转
        wx.redirectTo({
          url: '../teachers/teachers'
        })
      }

最后的页面效果如图所示



没有更多推荐了,返回首页