精华内容
下载资源
问答
  • 微信小程序居中代码

    2017-10-25 15:40:00
    html页面: {  text-align:center; } wxss页面: {  width: 100%;  height: 100%;  display: flex;  justify-content: center; } 转载于:...

    html页面:

    {

      text-align:center;

    }

    wxss页面:

    {

      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;

    }

    转载于:https://www.cnblogs.com/moguzi12345/p/7729190.html

    展开全文
  • Tips:这里整合微信小程序中常用的代码块 当前代码适用于 2.7.7版本的调试基本库 一、微信小程序时间戳 获取当前 10 位数字的时间戳 var timestamps = Date.parse(new Date()); var timestamp = parseInt...

    Tips:这里整合微信小程序中常用的代码块

    当前代码适用于 2.7.7版本的调试基本库

    一、常见小功能

    1.1 获取当前 10 位数字的时间戳
      var timestamps = Date.parse(new Date());
      var timestamp = parseInt(timestamps / 1000);
    
    1.2 页面跳转自动刷新

    将方法体放进 onShow() 中调用即可

    二、wxss样式

    1. 和顶部,左边,右边有间距
    margin-top: xxrpx; /*外边距*/
    padding-top: xrpx;/*内边距*/
    
    margin-left: xx;
    margin-right: xx;
    
    /*如果是一列元素,把他变成横向的,可以使用如下*/
    padding-top:20rpx;
    
    2. 一顺着排列的元素,禁止换行
    white-space:nowrap;
    /* display 样式也要进行更换*/
    display: inline-block;
    
    /*flex 布局 允许换行*/
    flex-wrap: warp;
    
    3. 文字布局
    /*文字位置*/
    text-align: center; /* left,right*/
    
    /*如果一行文字溢出,就要使多出去的文字变成省略号*/
      text-overflow: ellipsis;
      overflow: hidden;
    
    4. 垂直布局

    常常和两者一起使用

    display:flex;
    justify-content:flex-start;

    align-items: center;
    
    5. 设置内变距
    padding : 1px solid #e4e4e4
    /*设置上下左右内边距*/
    padding : 30rpx 30rpx;
    
    6.设置行高
    line-heigth: 50rpx;
    
    7.设置分割线
      border-bottom: 1px solid #e4e4e4;
    
    8. 居中布局的一种方式
    margin: 0 auto;
    
    9. 垂直居中

    三、微信官方 API

    3.1 普通接口

    3.1.1 修改当前界面的标题
     wx.setNavigationBarTitle({
          title: "",
        })
    
    3.1.2 加载响应,。。。

    在这里插入图片描述

        wx.showLoading({
          title: '正在发表中。。。。',
        })
    
    
    // 一般某个任务执行完之后,就要把加载隐藏
     wx.hideLoading();
    
    3.1.3 界面跳转
    //跳转到某一个页面
        wx.navigateTo({
          url: '',
        })
    //回到上一页
       wx.navigateBack({});
    
    3.1.4 自动跳转到页面的首行(在onShow中执行)
        wx.pageScrollTo({
          scrollTop: 0,
        })
    
    3.1.5 自定义组件,数据渲染出现问题
    observer(newVal, oldVal, changedPath) {
    // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
    // 通常 newVal 就是新设置的数据, oldVal 是旧数据
    }
    
    3.1.6 延时函数

    延时 1000 ms,即1s

         setTimeout(()=>{
            //方法体
          },1000);
    
    3.1.7 某一任务执行成功,即显示相对应的文字

    在这里插入图片描述

        wx.showToast({
                title: '发送成功',
              });
    

    3.2 云开发接口

    3.2.1 操作云函数数据库

    在 index.js 中的 Page 之前加入全局变量

    const db = wx.cloud.database();
    Page({
    
     nonono : function()
    {
    	db.collection("云函数你创建集合的名称").bulabula
    	//这里就是对云数据库的集合相关操作了
    	},
    })
    
    3.2.2 完成微信授权的功能

    在 app.js 中写好相对应的 授权功能函数,
    eg:

    //获取用户授权
      loadUserInfo:function(){
        const that = this;
        wx.getSetting({
          success: res =>{
            const isUserInfo = res.authSetting['scope.userInfo'];
            if(isUserInfo){
              wx.getUserInfo({
                success:res => {
                  console.log(res);
                  const userInfo = res.userInfo;
                  that.globalData.userInfo = userInfo;
                }
              })
            }
          }
        })
      },
    

    然后回到 index.js 中,还是和上面一样,在Page 前面

    // 获取 app.js 中手机的相关信息
    const app = getApp();
    
    //然后后面就可以直接通过 app 调用 app.js中写下的方法,这是一个获取个人姓名的接口实现
    const author = app.globalData.userInfo;
    

    四、wx:key 解决方案

    wx:key 是为了提高循环效率而出现了,给它的值,只要是循环元素中的唯一的标识符就可以了

    1. 字符串类型的循环
    wx:key="{{this}}"
    

    五、常用代码块梳理

    5.1 获取手机的设备信息

    同步获取手机信息
    在 index.js 下实现

      onLoad: function (options) {
        this.initImageSize()
      },
        initImageSize:function(){
          const windowWidth =  wx.getSystemInfoSync().windowWidth;//获取手机的宽度
          console.log(windowWidth)
        },
    

    5.2 延时函数

    延时 0.8 秒,以毫秒为单位

         setTimeout(function(){
              
              },800)
    

    六、特殊组件的实现

    6.1 在当前界面实现一个按钮组件

    先看图
    在这里插入图片描述
    index.wxml

      <!-- 发布按钮布局-->
    
      <view class="write-weibo-btn" hover-class="none" hover-stop-propagation="false">
          <view>+</view>
      </view>
    

    index.wxss

    .write-weibo-btn{
        position:fixed;
        right:50rpx;
        bottom:100rpx;
        width:100rpx;
        height:100rpx;
        background:#74c1e0;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:100rpx;
        color:#fff;
        box-shadow: 0 0 5px #rgba(0,0,0,0,5);
    }
    
    .write-weibo-btn view{
        margin-top:-16rpx;
    }
    
    展开全文
  • 微信小程序居中 1、子控件水平垂直居中 display: flex; align-items: center; justify-content: center; width: 100%; height: 400px //注意:这里的 height 写 100%会使得垂直居中可能会不生效 2、 微信小...

    微信小程序居中、居右、横纵布局

    1、相对父类控件水平垂直居中

    方式一:水平垂直居中

    父类控件:

      display: flex;
      align-items: center;//子控件垂直居中
      justify-content: center;//子控件水平居中
      width: 100%;
      height: 400px
      //注意:这里的 height 写 100%会使得垂直居中可能会不生效
    

    可能会有兼容问题

    方式二:水平垂直居中(方式二推荐)

    父类控件:position: relative;
    子类控件:

    	position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top:0;
        margin: auto;
    

    方式三:水平垂直居中(方式三推荐)

    父类控件:

    	display: table-cell;
        vertical-align: middle;
    

    子类控件:margin:0 auto;

    方式四:水平垂直居中

    父类控件:position:relative;
    子控件:

    	position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    

    可能会有兼容性问题

    水平居中A:相对父类控件

    	margin: 0 auto;
      	text-align: center;
    

    水平居中B、相对父类控件–子控件绝对定位

    需要知道控件的宽高,-100rpx为自身宽高(200)的一半

    width: 200rpx;
      height: 200rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100rpx;
      margin-left: -100rpx;
    

    水平居中C、相对父类控件(水平)居中

    父类:text-align:center;
    子类:display:inline/inline-block;

    2、微信小程序横向布局、纵向布局

    横向布局
    display: flex;
    flex-direction: row;
    
    纵向布局
    display: flex;
    flex-direction: column;
    

    3、控件居右

    父类控件中

    position: relative; /*父元素位置要设置为相对*/
    

    (第一种居右方法)子类控件居右显示

    position: absolute; /* 相对relative也可以 */
    right: 0; /* 靠右调节 */
    margin-right: 35rpx
    

    (第二种居右方法)只在子类控件中加入

      position: fixed;
      right: 0;
    

    (第三种居右方法)

    float: right;
    

    (第四种居右方法)父类控件

    	display:flex;
      justify-content:flex-end;
    

    子类控件水平居中显示

    position: absolute; 
    right:40%;
    left:40%;
    

    子类控件底部显示一

    position: fixed;
    bottom: 20rpx;
    

    子类控件底部显示二

    //父类
    position: relative;
    //子类
    position: absolute;
    bottom: 0;
    

    居底的还可以看看另一篇文章:底部购物车

    4、文字在图片中间

    效果图:
    在这里插入图片描述
    瘦身燃脂 这四个字就是在图片的正中间

    代码

    wxml

    <view class='container'>
    
      <view class="view_1">
        <image class="image_1" src="../images/jiaocheng1.jpg"></image>
        <text class="text_1">瘦身燃脂</text>
      </view>
    
    
    </view>
    

    wxss

    .view_1 {
      position: relative
    }
    
    .image_1 {
    }
    
    .text_1 {
      width: 100px;
      height: 24px;  
      position: absolute;
      left: 0;
      top: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
    } 
    

    5、网格布局

    效果图:
    在这里插入图片描述
    wxss代码:

      display: grid;
      width: 100%;
      overflow-x: hidden;
      /* 设置列、行大小 fr单位是等分分配列空间 4列,如果要3列,删除一个1fr*/
      grid-template-columns: 1fr 1fr 1fr 1fr;
      /* grid-template-rows: 100rpx 100rpx; */
      /* 有多余数据时,自动添加新行时默认行高为:200rpx */
      grid-auto-rows: 100rpx;
      /* 设置网格线大小 */
      /* grid-gap: 10rpx; */
    
    展开全文
  • 未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用...

    “晓程序”

    小程序连载笔记,通俗易懂,欢迎各位转发关注学习。未经作者授权,禁止转载

    初识小程序

    什么是微信小程序

    微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

    2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

    2019年8月9日,微信向开发者发布新能力公测与更新公告,微信PC版新版本中,支持打开聊天中分享的微信小程序。

    注册小程序账号

    在网页中搜索微信公众平台,点击进入小程序注册页面,按照页面的流程一步步进行注册

    65c56929e39c6981c26362c889f883ba.png

    开发环境准备

    1. 下载开发工具

    • 选择相应的电脑版本进行下载4cc62905bfb65ed7eda71262355cdcfa.png

    获取小程序AppID和AppSecret密钥

    • 登录微信公众平台登录小程序账号

    • 点击开发设置

    5773a26a9e754fdfc91fbf06ab641e80.png

    下载完成之后可以进行登录

    • 登录界面

    273cb99be375ad237aa01dea392e5cf7.png

    • 新增项目,填写刚才获取的AppID,不使用云服务

    737519802dded83d4bd9d979992f3895.png

    • 现在可以正式开发了

    9b39211da18ed48634b973c34de05cc3.png

    第一个小程序

    1. 打开刚才新建的项目

    2. 修改index.wxml中的代码,标签就是显示内容的。

       <view class="usermotto">        <text class="user-motto">第一个小程序text>view>
    3. 完成之后按 Ctrl + S 保存,效果如下

      529903d266c8a309207cc1a371137b90.png

    4. 可以通过点击预览按钮在手机端进行测试

      135bb919cf5ce6c70c2ebf1e6515f5a5.png

    至此,我们已经简单的了解了一个小程序的创建过程,但这还远远不够,还存在着许多的问题。

    例如:

    • 小程序的启动入口在哪里?

    • index.wxml、index.wxss、index.js等文件各自的作用,能否进行重命名?

    • WXML、WXSS文件是什么?

    • 以及创建完成之后如何发布给别人使用?

    展开全文
  • 微信小程序滚动居中导航选项卡

    千次阅读 2019-02-11 16:33:36
    微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。 效果示意图: 被选中的tab会始终居中显示。 利用微信小程序自带的组件scroll-view的scroll-left就很容易实现...
  • 微信小程序文本居中

    千次阅读 2021-01-08 14:14:27
    .myText{ display: flex; align-items: center;/* 垂直居中 */ justify-content: center;/* 水平居中 */ width: 200rpx; height: 200rpx; }
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...
  • 微信小程序适配canvas大小位置居中

    千次阅读 2019-07-21 20:56:07
    canvas适配微信小程序居中绘制 通过微信wx.getSystemInfo获取屏幕宽度进行对canvas绘制,参考了https://blog.csdn.net/qq_33529011/article/details/80915414进行制作 js部分: onReady: function () { //微信...
  • 本节主要讲解小程序商城两行快捷菜单的实现。效果见图12-4和12-5所示。 1.应用知识点分析 知识点包括:  普通菜单的使用。  循环菜单的使用。  1行4列的布局实现。  跳转的实现。 我们这里主要讲解快捷菜单...
  • 微信小程序文字居中

    万次阅读 2018-04-04 17:50:30
    文字居中: text-align:center;
  • 如果被遮挡,则要移到当前元素居中位置 tab_config.tab_left = max_left_item - (window_width - tab_config.item_width) / 2 ; } } that.setData({ "tab_config" : tab_config, "swipe_config" : swipe_...
  • 由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习...
  • 微信小程序-view居中问题

    千次阅读 2017-01-09 14:45:08
    最近开发微信小程序,发现小程序大部分语法是ES6的标准,比如...操作符,替代了apply 和call; 而且页面展示wxss,虽然微信最近规范了一些,但是css3的一些用法可用的,css3相信html5前端开发一定不陌生,相信用着用着...
  • 水平垂直居中 示例库 代码片段
  • 主要介绍了微信小程序如何调用图片接口API并居中显示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序文字居中 <view class='container'> <text>这是个例子 </text> </view> .container{ border: 2rpx black solid; width: 400rpx; height: 200rpx; display: flex; flex-...
  • # 核心代码 <!--guide.wxml--> <view class="container"> <view class="usermotto"> <image class="guide-icon" src="../images/icon.svg"></image> <text class="user-motto"&...
  • /*居中*/ } /*下面的都是第3层的元素样式*/ .wx-cell-icon{ width: 56rpx; height: 56rpx; } .wx-cell-text{ flex: 1; /*中间的文字内容,扩展,占用所有剩余的空间,这样左右图片都靠边*/ margin-left: 30rpx;...
  • 微信小程序

    2021-04-16 20:25:36
    微信小程序微信小程序1.微信小程序介绍1.1. 为什么是微信小程序 ?1.2. 微信小程序历史1.3. 疯狂的微信小程序1.4. 还有其他的小程序 不容忽视1.5. 体验1.5.1. 官方微信小程序体验1.5.2. 其他优秀的第三方小程序2....
  • 使用Taro框架开发微信小程序也是考虑可能有多端需要。 npm run build:h5后有如下问题: 1.不要用Image、Text标签作css选择器,这些微信小程序能识别,但h5不能 2.Image标签在转成img时外面包了层div,所以要手动...
  • 微信小程序之文字水平垂直居中

    千次阅读 2018-11-15 17:35:00
    微信小程序 常用的文字居中写法如下所示: display: flex; flex-direction: column; justify-content: center; 效果为一个view模块的水平垂直居中位置。   若想实现只是文字的垂直居中代码如下: ...
  • /*居中*/ border-bottom: 1px solid #ddd; /*每个分类下面的灰色横线*/ z-index: 10; } .type-nav.selected{/*选中某个分类的样式*/ margin-right: -1px; padding-left:-1px; color: #333; background-color:...
  • 水平居中: text-align: center; 垂直居中: height = line-height (微信小程序测试无效) 文本line-height = 外层view高度 (微信小程序测试有效) 还可以使用flex实现垂直居中 ...
  • 微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。插入button按钮并保存后,便可以以预览界面看到一个原始的按钮。小程序样式修改默认没有对按钮设置任何样式时,按钮占用整个一行...
  • 主要介绍了微信小程序scroll-view点击项自动居中效果的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序点击元素居中

    千次阅读 2018-11-27 20:14:38
    我们希望点击不居中的元素时可以自动居中,下面看一下实现的思路: 获取屏幕宽度的一半 获取点击元素距离屏幕左边的距离 获取点击元素的宽度一半 获取已经滚动的距离 计算距离的变化:点击元素与屏幕左边的距离-屏幕的...
  • 嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,... 微信小程序开发代码布局4. 微信小程序开发注意事项源代码涉及到数据安全,就不分享了。小程序开发的基础视频有需要的可以留言。相关推荐:前端开发"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,265
精华内容 1,706
关键字:

微信小程序居中代码

微信小程序 订阅