微信开发者工具中怎么创建表格 - CSDN
  • 微信小程序----简易table表格

    万次阅读 多人点赞 2017-01-23 17:08:53
    由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档推荐使用flex布局,就把css的flex布局学了一遍,效果还行,大家将就看一下 table.wxml <view class="th">head1 ...

    由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的flex布局学了一遍,效果还行,大家将就看一下
    table.wxml

    <view class="table">
      <view class="tr bg-w">
        <view class="th">head1</view>
        <view class="th">head2</view>
        <view class="th ">head3</view>
      </view>
      <block wx:for="{{listData}}" wx:key="{{code}}">
        <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>
        <view class="tr" wx:else>
          <view class="td">{{item.code}}</view>
          <view class="td">{{item.text}}</view>
          <view class="td">{{item.type}}</view>
        </view>
      </block>
    </view>

    table.wxss

    .table {
      border: 0px solid darkgray;
    }
    .tr {
      display: flex;
      width: 100%;
      justify-content: center;
      height: 3rem;
      align-items: center;
    }
    .td {
        width:40%;
        justify-content: center;
        text-align: center;
    }
    .bg-w{
      background: snow;
    }
    .bg-g{
      background: #E6F3F9;
    }
    .th {
      width: 40%;
      justify-content: center;
      background: #3366FF;
      color: #fff;
      display: flex;
      height: 3rem;
      align-items: center;
    }

    table.js

    Page({
      data: {
        listData:[
          {"code":"01","text":"text1","type":"type1"},
          {"code":"02","text":"text2","type":"type2"},
          {"code":"03","text":"text3","type":"type3"},
          {"code":"04","text":"text4","type":"type4"},
          {"code":"05","text":"text5","type":"type5"},
          {"code":"06","text":"text6","type":"type6"},
          {"code":"07","text":"text7","type":"type7"}
        ]
      },
      onLoad: function () {
        console.log('onLoad') 
      }
    
    })

    效果图如下
    效果图如下

    其实这也是很简单flex布局,更复杂的布局就交给大家了

    展开全文
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...

    就是把防火墙关掉
    在这里插入图片描述
    请把防火墙关闭 然后打开微信开发者工具就会显示文件了。我的就是这样解决的。
    好了后 你可以在吧防火墙开启 也可以使用一个专有网络关闭防火墙。反正如果没有文件显示你就去关闭防火墙再打开就可以了。

    展开全文
  • 摘要:本文介绍了微信小程序的开发者工具微信小程序使用的基本前后端框架1.简介为了鼓励广大程序员跳入微信小程序开发这个大坑,腾讯很贴心地提供了微信小程序开发框架以及灰常详细的开发文档(点这里),文档...

    摘要:本文介绍了微信小程序的开发者工具、微信小程序使用的基本前后端框架

    1.简介

    为了鼓励广大程序员跳入微信小程序开发这个大坑,腾讯很贴心地提供了微信小程序开发框架以及灰常详细的开发文档(点这里),文档言简意赅清晰易懂,读完令人如沐春风,赞一个。我读了两遍就打算开始正式开发了,有意向专攻这方面开发的同学可以多读两遍。

    总体来说,微信小程序遵循传统前端框架开发界面,后端服务器语言提供基础支持的模式。开发还是非常容易的。

    基本的开发步骤为这样:
    1、配置开发环境,只要下载开发者工具(点这里)就可以了。安装开发者工具以后,使用微信扫码登录,自行填写下面的条目。关于AppID这一栏,如果App需要在应用里上线的话,需要去官方申请,如果只是体验一下的话,可以不用填AppID,直接点旁边的”无AppID”就可以了。
    这里写图片描述

    在开发者工具创建项目时会提示,是否需要创建一个 quick start 项目。选择“是”,会自动生成一个简单的原始模型。

    1. 点击左边的编辑,里面含有整个Project的文件结构。具体来说,
      小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
      这里写图片描述

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

    文件类型 必填 作用
    app.js 小程序逻辑
    app.json 小程序公共设置
    app.wxss 小程序的css样式表

    每个单独的小程序页面由四个文件组成,分别是:

    文件类型 必填 作用
    js 页面逻辑
    wxml 页面结构
    wxss 页面样式表
    json 页面配置

    这两个表格内的文件,就是小程序运行的所有组件。具体的内容,根据详细的开发框架,完成需要制作的程序即可。

    点击左侧的”项目”,再点击预览,扫码后即可在微信客户端中体验小程序在手机端运行的效果。

    这里写图片描述

    2. 框架分析

    根据小程序官方文档的介绍,框架的核心为两块视图层和一个逻辑层。
    1. 视图层使用微信自行开发的的WXML和WXSS语言开发,基本可以看做是XML和CSS的缩小版。
    2. 逻辑层使用JavaScript开发,提供一系列数据绑定、传输和事件系统。
    听到这里我赶紧把三年前买的书从书架上拿出来,把上面的灰尘擦干净,压压惊。
    这里写图片描述

    我记得从前有为架构师说过,凡是能用JS开发的软件折腾到最后都会用JS开发。说这句话的人具体是谁?管他呢!

    另外,官方文档也提供了一大堆设计标准、组件、视图中的基础部件、快捷调用手机硬件功能的API,比如用户信息,本地存储,支付功能等等,总之,用最简单的方法让程序员快速、流畅地开发软件,看起来小程序还是做到了。

    展开全文
  • 微信小程序创建表格

    2019-10-21 18:41:16
    微信小程序创建表格 今天小编遇到了这样一个需求,用户想要列表信息,找了好多地方,才发现微信没有H5的table标签,所以自己画了一个表格。发现效果还不错,分享给大家。以下是我的效果图(内容仅为参考): ...

    微信小程序创建表格

    今天小编遇到了这样一个需求,用户想要列表信息,找了好多地方,才发现微信没有H5中的table标签,所以自己画了一个表格。发现效果还不错,分享给大家。以下是我的效果图(内容仅为参考):

    以下是这个样式的wxml代码:

    <view class="table" >
    
        <view class="tab_th">
    
            <view class="th_td1 th_text"><text>序号</text></view>
    
            <view class="th_td2 th_text"><text>姓名</text></view>
    
            <view class="th_td3 th_text"><text>性别</text></view>
    
            <view class="th_td4 th_text"><text>备注</text></view>
    
        </view>
    
        <block >
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>1</text></view>
    
            <view class="tr_td2 text"><text>张飞</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>2</text></view>
    
            <view class="tr_td2 text"><text>关羽</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
        
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>3</text></view>
    
            <view class="tr_td2 text"><text>刘备</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
        
        <view class="tab_tr">
    
            <view class="tr_td1 text"><text>4</text></view>
    
            <view class="tr_td2 text"><text>赵云</text></view>
    
            <view class="tr_td3 text"><text>男</text></view>
    
            <view class="tr_td4 text"><text>已婚</text></view>
    
        </view>
    
    </block>
    
    </view>

     

    下面是wxss代码:

    .table{
    
        width: 98%;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        position: relative;
    
        left: 1%;
    
        color: #333333;
    
    }
    
    .tab_th{
    
        width: 100%;
    
        position: relative;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
        
        justify-content: center;
    
    }
    
    .th_td1{
    
        width: 15%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td2{
    
        width: 40%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td3{
        
        width: 25%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .th_td4{
    
        width: 20%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FAFAFA;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tab_tr{
    
        width: 100%;
    
        position: relative;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td1{
    
        width: 15%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td2{
    
        width: 40%;
    
        height: 70rpx;
    
        border: 1px solid #E8E8E8;
    
        background-color:#FFFFFF;
    
        display: flex;
    
        align-items: center;
        
        justify-content: center;
    
    }
    
    .tr_td3{
    
        width: 25%;
    
        height: 70rpx;
    
        border: 1px solid#E8E8E8;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .tr_td4{
    
        width: 20%;
    
        height: 70rpx;
    
        border-top: #E8E8E8 solid 1px;
    
        border-bottom: #E8E8E8 solid 1px;
    
        background-color: #FFFFFF;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
    }
    
    .text{
    
        font-size:12px;
    
        font-family:PingFangHK-Regular,PingFangHK;
        
        font-weight:400;
    
        color:rgba(51,51,51,1);
    
        line-height:17px;
    
    }
    
    .th_text{
    
        font-size:16px;
    
        font-family:PingFangSC-Regular,PingFang SC;
    
        font-weight:400;
    
        color:rgba(51,51,51,1);
    
        line-height:22px;
    
    }

     

    希望可以帮助到大家,样式仅为参考,大家其实可以自己动手画一个表格,说不定更好!

    展开全文
  • Cocos Creator菜鸟学习--运行到微信准备(cocos工程,微信开发者工具)配置微信环境构建发布运行到手机微信如果如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...
  • @所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, ...
  • 开发环境:微信开发者工具+eclipse+Tomcat+Mysql 功能描述:微信小程序前台传参到后台获取数据,后台将数据返回给前台,前台用表格形式显示数据。 后台代码(部分): public class SeeStu extends HttpServlet { ...
  • HTML我帮您WEBAPP在线可视化开发工具是一款在线可视化网站在线设计软件,无须专业知识,通过鼠标拖拽,所见即所得,快速完成手机网页设计和微信场景应用、HTML5轻应用设计;在线DIY产品宣传册、婚礼、在线订单、市场...
  • if (this.TextBox1.Text.Trim() != ""){int len = int.Parse(this.TextBox1.Text.Trim());for (int i = 0; i < len; i++){TableCell tc = new Tab...
  • Towxml Towxml 是一个可将HTML、...用于解决在微信小程序Markdown、HTML不能直接渲染的问题。 特色 支持代码语法高亮 支持emoji表情 支持上标、下标、下划线、删除线、表格、视频、图片(几乎所有html元素)……...
  • 微信小程序最快捷的方式应该还是利用腾讯云做后台,本文对开启微信小程序和腾讯云的绑定实践了一下。 包括安装,开通,开发环境配置,生产环境配置。很大一部分内容来自官网 1 注册微信小程序(官网贴图) 官网...
  • 微信JS接口- 企业号开发者接口文档

    千次阅读 2019-01-22 14:05:04
    目录 1 概述 1.1 使用说明 1.1.1 步骤一:引入JS文件 1.1.2 步骤二:通过config接口注入权限验证配置 1.1.3 步骤三:通过ready接口处理成功验证 1.1.4 步骤四:通过error接口处理失败验证 ...
  • 关于ActiveXObject

    2019-06-22 15:03:39
    ActiveXObject 对象 此对象提供自动化对象的接口。 newObjName = new ActiveXObject(servername.typename[, location]) newObjName 必填参数 变量名...
  • 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI ...4.5...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 微信分享好友+朋友圈准备工作资源申请配置AS新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具。 打开 ...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 前端开发之各开发软件下载及破解记录前言微信开发者工具支付宝开发者工具HBuilderXsublime_text如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表...
1 2 3 4 5 ... 20
收藏数 2,957
精华内容 1,182
热门标签
关键字:

微信开发者工具中怎么创建表格