精华内容
下载资源
问答
  • 微信小程序如何读取本地txt文件

    千次阅读 2019-12-13 18:52:41
    1、先创建一个txt文件,然后手动复制粘贴到小程序项目文件夹根目录中 2、调用接口wx.getFileSystemManager().copyFile() 复制txt文件到开发者可读写的文件夹 wx.getFileSystemManager().copyFile({ //先把文件复制...

    1、先创建一个txt文件,然后手动复制粘贴到小程序项目文件夹根目录中

    注意:txt文件的内容必须是JSON对象格式
    在这里插入图片描述

    2、调用接口wx.getFileSystemManager().copyFile() 复制txt文件到开发者可读写的文件夹

    wx.getFileSystemManager().copyFile({
        //先把文件复制到可操作的文件夹
            srcPath: 
    展开全文
  • 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据。如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后...
  • 微信小程序读取本地数据

    千次阅读 2017-09-06 12:27:29
    [size=medium]在utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据。[/size] util.js: [code="java"]function data(){ let arr = [1,2,3] ...
    [size=medium]在utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据。[/size]
    

    util.js:
    function data(){
    let arr = [1,2,3]
    return arr
    }

    module.exports = {
    data:data
    }


    页面中调用:
    var fileData = require('../../utils/util.js')  
    Page({
    data: {
    showData: fileData.data(),
    },
    })


    ---------------------------------------------------------------------------------

    170907修改:

    直接用es6语法实现:(贼鸡儿直观好吧)
    util.js:
    function data(){
    let arr = [1,2,3]
    return arr
    }
    export {data}


    页面中调用:
    import {data} from '../../utils/util'
    展开全文
  • 微信小程序读取json数据

    万次阅读 热门讨论 2018-10-05 09:47:09
    该文章为转载文章 index.wxml <view class='list-head'>列表测试</view> <view class='list-box'> <view class='list-li mflex' wx:for="...view cl

    该文章为转载文章

    index.wxml

    <view class='list-head'>列表测试</view>
    <view class='list-box'>
        <view class='list-li mflex'  wx:for="{{list_data}}"  wx:key="index" >
            <view class='list-img'><image src='{{item.imgUrl}}'></image></view>       
            <view  class='list-tit'><text>{{item.id}}、{{item.title}}</text></view>    
            <view class='list-con'><text>单价{{item.unitprice}}元/m²</text></view> 
            <view class='list-adr'><text>{{item.city}}</text></view>    
            <view class='list-tag'>
                <text class='tag_{{index}}' wx:for="{{item.tag}}" wx:for-item="cell" wx:key="index" >{{cell.tags}}</text>
            </view>          
        </view>
    </view>
    

    index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {},
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var _this = this
        wx.request({
          url: 'http://自己的域名cn/index.json',//json数据地址
          headers: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            //console.log(res.data.imgListData)
            //console.log(res.data.imgListData[0].tag)
            //将获取到的json数据,存在名字叫list_data的这个数组中
            _this.setData({
              list_data: res.data.imgListData,
              //res代表success函数的事件对,data是固定的,imgListData是上面json数据中imgListData
            })
          }
        })
      }
    })

    index.json

    {
      "imgListData": [
        {
          "id": "1",
          "title": "标题描述",
          "content": "内容描述 ",
          "city": "详细地址",
          "adrs": "上海",
          "room": "楼房描述",
          "imgUrl": "https://upload-images.jianshu.io/upload_images/13570975-792453585d7b84af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
          "dataTimes": "时间",
          "peo": "姓名",
          "tel": "手机号",
          "pho": "照片地址",
          "money": "价格",
          "unitprice": "单价",
          "tag": [
            {
              "tags": "标签一"
            },{
              "tags": "标签七"
            },{
              "tags": "标签八"
            }
          ]
        },
        {
          "id": "2",
          "title": "标题描述",
          "content": "内容描述 ",
          "city": "详细地址",
          "adrs": "上海",
          "room": "楼房描述",
          "imgUrl": "https://upload-images.jianshu.io/upload_images/13570975-792453585d7b84af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
          "dataTimes": "时间",
          "peo": "姓名",
          "tel": "手机号",
          "pho": "照片地址",
          "money": "价格",
          "unitprice": "单价",
          "tag": [
            {
              "tags": "标签二"
            },{
              "tags": "标签六"
            },{
              "tags": "标签七"
            }
          ]
        }
      ]
    }
    

    index.wxss

    .mflex {display:flex;}
    .list-head{text-align: center;font-size:32rpx;}
    .list-li{height:166rpx;padding:40rpx 30rpx;border-bottom:2rpx solid #e4e7ec;flex-wrap:wrap;justify-content:space-between;flex-direction:column;align-items:center;}
    .list-img{width:210rpx;height:166rpx;}
    .list-img image{display: block;width:210rpx;height:166rpx;}
    .list-tit,.list-adr,.list-tag,.list-con{width:calc( 100% - 240rpx );}
    .list-tit{font-size:30rpx;color:#1c2627;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;}
    .list-con{font-size:24rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    .list-adr{font-size:22rpx;color:#555;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; }
    .list-tag{font-size:20rpx;}
    .list-tag text{background:#f5ecdf;color:#ff9d00;padding:5rpx;margin-right:10rpx;}
    .list-money{font-size:30rpx;color:red;flex:1;text-align: right;font-weight:bold;}
    .dizhi{flex:2;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
    .list-tag text{color:#fff;}
    .list-tag .tag_0{background:#c3dbf3;}
    .list-tag .tag_1{background:#fbd08f}
    .list-tag .tag_2{background:#fdd2d5;}
    .list-tag .tag_3{background:#add2a5;}

    实现效果:

    json数据在服务器上显示效果:

    展开全文
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小...

    说明:笔者重新规划了博客方向,想更详细的讲解微信小程序的所有技术内容,本文于2020年5月24日已做修改。

    同时笔者也欢迎一起合作共赢,愿意写杂志,写书,贡献自己的一份微薄之力!


    本文原创首发CSDN,链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ,作者博客https://blog.csdn.net/qq_41464123 ,转载请带上本段内容,尤其是脚本之家、码神岛等平台,谢谢配合。


    作为第二篇的讲解,本文主要讲解 

    1. 微信小程序好在哪里?
    2. 学习微信小程序,需要什么基础?
    3. 如何学习微信小程序?
    4. 微信小程序的基本架构。

     

    前言

    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

    说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开自己手机中的微信,向下一拉,就可以看到小程序列表了。比如“腾讯QQ”这个小程序,我们可以利用它,接收QQ的消息;再入“跳一跳”,“天天象棋”这些小游戏,我们可以利用学习工作之余的短暂空闲时间玩上一把小游戏......那么,为什么微信小程序能够有如此大的发展呢?现在就来谈谈我的看法。

    笔者曾经在运维微信公众号的时候,发现了小程序的存在,后来就申请了一个,尝试着开发出了第一个属于自己的小程序。从无到有,再到现在的实战开发,虽然敲的代码都是套模板,思路也很暴力,但平时还是会积累很多小程序相关的实践经验和做一些基于微信小程序的开源项目,所以说总结微信小程序的项目经验,我觉得是我最好的成长,也希望给今年想接触微信小程序或者想从事微信小程序工作的朋友带来一些经验和思考


     

    一:小程序优势有哪些?

     

    1.几乎不占用手机内存

    如果你的电脑是低配的话,那么你就必须要合理取舍安装的软件。笔者曾经拿学校机房的电脑做过简单实验,我给电脑安装若干杀毒软件,然后同时开始体检、木马扫描操作。实验结论:只需两个杀毒软件同时体检、杀毒操作就会导致死机,2分钟内鼠标键盘无响应且电脑无法正常工作;四个杀毒软件同时体检,电脑大概率蓝屏

    电脑为什么会死机,会蓝屏?就是因为电脑资源耗尽。同理,你如果给自己的手机装上几十个APP,效果可想而知。微信小程序几乎不占用系统内存,能给用户,尤其是低配手机用户一个良好的体验

     

    2.无需安装,用完即走

    最近因为新型冠状病毒,全国大多数学生都在参与网上教学,这个时候会涉及到很多APP。当然常用的APP,安装在手机,完全没问题,但是那些不常用的、不太需要的如何是好?比如在大学,充饭卡一个APP,冲热水卡一个APP,跑步一个APP,看新闻做题也是一个APP,要请个假也是一个APP,可能还是学校强制要求安装的,大家是否吐槽过这种行为?

    而微信小程序是建立在微信这个大平台的应用,使用时被打开,使用完毕就消失,而且随时都可被使用,做到了“用时打开,用完即走。当然小程序还有其他优点,这里不再一一叙述。

     

    继续阅读,你将会了解到这些

    • 微信小程序需要的基础

    • 微信小程序优势以及设计思想

    • 如何学习微信小程序

    • 微信小程序开发流程


     

    二:学习微信小程序,需要什么基础?

    阅读本文之前,建议大家最好要有以下基础知识,会写小程序的代码不一定能很好的实现业务需求和功能,要想实现不同项目需求下不同复杂度的逻辑,一定要对以下基础有充足的了解。所以在此希望大家先熟悉一下相关基础知识,好好研究一下。

    • HTML:至少常用的标签要学会使用,比如<button>按钮标签,<text>文本标签,要知道一些标签是干什么用的。
    • CSS:了解类选择器、标签选择器定义和用法;了解常用的属性,比如height高度,width宽度,font-size字体大小等。
    • 熟练一种编程语言:java/js/c++皆可,这里主要是要熟练变量定义、if条件判断、字符数组。
    • 其他:相对/绝对路径,了解JSON格式,生命周期函数

     

    三:如何学习小程序?

     

    我个人认为,学习最快的方式就是实践,根据官方文档,多写几个demo是就是学习微信小程序最好的方式。

    • 学习前端基础,包括但不限于HTML + CSS + JS + JQ。
    • 学习小程序基础语法,了解小程序基本结构(JS、JSON、WXML、WXSS)。
    • 实战,写项目。

    初学者需要注意几点:

    • 小程序不像vue那样,修改代码按下保存后,网页上会立刻见效。每一次修改代码后,如需看效果,必须重新编译或者按Ctrl + S 保存,然后等待模拟器重新加载主页,才可查看修改后的效果。
    • 要善于调用模板或者接口,切忌大片自行编程。如果需要实现某个功能,先查询一下官网文档,是否有相应的模板或库。
    • 如果是需要对接数据库的项目,必须在开发前购买服务器,实名认证且备案,小程序开发时间一般少于服务器审核时间(对于小项目来讲),小程序请求的地址必须是已备案的域名。
    • 不要使用传统编程思想来看待小程序开发,小程序不像Java那样可以随心应手的写,其部分功能未必能够实现。

     

    四:小程序项目的基本文件类型

     

    首先是开发工具!

    磨刀不误砍材工,要想高效率的开发,必须要熟练使用开发工具(IDE)。下面我们先来了解一下微信小程序的专属开发工具。

    官网下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    第一块区域是模拟器区域,是我们代码效果的直接显示,按下CTRL + S 或者编译键,模拟器区域会刷新显示我们的界面。

    第二块区域是项目结构一个小程序主体部分由三个文件组成,必须放在项目的根目录,分别是:JS(小程序逻辑)、JSON(小程序公共配置)、WXSS(小程序公共样式表)每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块,且描述页面的四个文件必须具有相同的路径与文件名。

    第三块区域就是我们编写代码的区域,占用了大部分的屏幕。

    第四块区域是调试区域,小程序可以通过console.log()向控制台输出临时的信息,就相当于C++的cout<<"hello zwz"<<endl; 也相当于Java的syso。这时候这些临时信息会在这个区域显示,方便我们调试程序。

    第五块区域就是常用的功能模块,这里点击编辑,代码区会自动保存,模拟器会重新加载界面;点击上传代码,会发送到微信公众平台上,然后用于发布小程序。


    其中第二块区域的项目结构,我们重点介绍

    第一块:JSON

    上面提到:每个分页面分为JS(页面逻辑)、JSON(页面配置)、WXML(页面结构)、WXSS(页面样式表)四个模块那么这些页面分别都有什么用途呢?

    JSON是页面配置文件,可以对本页面的窗口表现进行配置,文件内容为一个 JSON 对象,会涉及到很多的属性。

    比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

    页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "标题zwz",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }

    第二块:WXML

     

    WXML其实就是HTML,是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

    比如最常用的双向数据绑定

    index.wxml

    <view class="container">
      {{msg}}
    </view>

    index.js

    Page({
      data: {
        msg:'hello zwz',
      },
      onLoad: function () {
       
      }
    })

    这样,我们虽然在WXML界面没有直接写文字,但{{msg}}就直接读取到了JS文件的变量值。

    这时,我们按下CTRL + S(保存,重新编译),我们会发现前台会渲染出  hello zwz。

    这就是传说中的双向数据绑定,你把JS后台的 hello zwz  改成 hi zwz,那么前台也会显示 hi zwz,以此类推。

     

    同理,如果是数组

    在JS页面的Page的data下,加上array变量,作为普通数组

    array:[1,2,3,4,5,6,7,8,9],

    接着将WXML界面的msg替换成array,界面则会显示如下:


    本文原创首发CSDN,链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ,作者博客https://blog.csdn.net/qq_41464123 ,转载请带上本段内容,尤其是脚本之家、码神岛等平台,谢谢配合。 


    第三块:WXSS

    WXSS和CSS一样,是一套样式语言,用于描述 WXML 的组件样式,WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中,拥有绝大部分CSS的内容。

    那么相比CSS而言,WXSS中独有的rpx单位可能会用得到,这个尺度单位可以根据屏幕宽度进行自适应。

    具体格式如下所示,下面是用了类选择器对WXML中的元素进行样式美化。

    .title{
      font-size: 30px;
      color: royalblue;
    }
    .input-placeholder{
      font-size: 16px;
    }
    .section{
      width: 100%;
      height: 55px;
      box-sizing: border-box;
      padding-top: 15px;
      font-size: 16px;
      display: flex;
    }

    第四块:JS

    这一块毫无疑问,就是用来存放后端逻辑代码的,我们需要掌握几个常用的生命周期函数,onShow、onLoad。

    Page({
      data: {
        msg: "hello zwz"
      },
      onLoad: function(options) {
        // 页面创建时执行
      },
      onShow: function() {
        // 页面出现在前台时执行
      },
      onReady: function() {
        // 页面首次渲染完毕时执行
      },
      onHide: function() {
        // 页面从前台变为后台时执行
      },
      onUnload: function() {
        // 页面销毁时执行
      },
    })

    然后就是自定义方法,注意是和onLoad()平级

    比如,我们在WXML内定义一个按钮

    <button bindtap="run">按钮1</button>
    

    接着,在JS页面编写响应事件

    Page({
      data: {
        msg: "hello zwz"
      },
      onLoad: function(options) {
        // 页面创建时执行
      },
      run: function() {
        // do some things
      },
    })

    那么,我们在点击这个按钮之后,就会触发run()这个方法。

     

    五:总结

    总而言之,本文讲解了微信小程序项目的基本架构,以及如何学习微信小程序,以及学习微信小程序所需要的基础,还有前台渲染的基本代码。

    笔者会出一个微信小程序的专栏,详细讲解微信小程序的常用技术,谢谢朋友们的关注!

    展开全文
  • 主要介绍了微信小程序 本地数据读取实例的相关资料,需要的朋友可以参考下
  • 微信小程序读取excel数据并批量添加进云数据库 上传excel成功 解析成功 为何云数据库集合中还是没有数据 请个各位大神帮我看看 以下附上图和代码 <p style="text-align:center"><img alt="" height="308" src=...
  • 微信小程序oss上传文件引用js 包括Signature及policy生成方法
  • 微信小程序读取线上json配置: wx.request({ url: 'xxxxxxx.json', // 线上json文件地址 headers: { 'Content-Type': 'application/json' }, success: function (res) { that.setData({ num: res..
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 主要介绍了微信小程序实现写入缓存与读取缓存详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • java接收微信小程序上传的文件

    千次阅读 2018-01-18 11:25:49
    微信小程序上传文件,微信会生成一个wx://开头的临时地址,很多人看到这个临时地址直接懵逼了,文件在哪里啊,怎么取文件,其实文件流就在请求头里面,需要自己去读取.一开始我也走了很多弯路,查阅了几篇帖子,其实都有...
  • 页面根元素 WXML简介 标签闭合、敏感性 数据驱动 数据绑定 列表渲染 ...全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比:网页编程采用的是 HTML + CSS + JS 这样的组...
  • 微信小程序-emoji评论 说明: 实现了emoji评论功能。 数据接口: 使用本地数据 目录结构: pages — 存放项目页面渲染相关文件 utils — 存放js库和日期格式化文件 iconfont — 存放样式文件 images — 存放图片...
  • // data.entries中包含多个文件的数据,.filename是筛选出其中某个文件的数据 } }) } else { const newName = new Date().getTime(); FSM.unzip({ zipFilePath: recoDir + filename, targetPath: recoDir + newName,...
  • 微信小程序缓存框架,支持数组、json、字符串……支持设置缓存时间、支持缓存读取失败默认值。 一、公共方法 put(k, v, t) k为key,v为具体内容(支持字符串、json、数组、boolean等等),t为可选参数表示过期时间...
  • 微信小程序 sdk for 腾讯云对象存储服务 前期准备 请您到 https://console.qcloud.com/cos 获取您的项目 ID(appid),bucket,secret_id 和 secret_key。 请您到 https://console.qcloud.com/cos 针对您要操作的 ...
  • 微信小程序中修改json文件时,建议在微信开发者工具中修改,vscode中不提供代码补全。 如图: 微信开发者工具: vscode:
  • 页面根元素 根元素page 每一个页面都具备一个根元素:<...WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比: 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 场景:微信小程序调用 wx.downloadFile() API 下载文件,PHP后端做处理并返回文件流程; 流程: 1.小程序展示需要下载的文件列表;...
  • 微信接口地址: wx.getFileSystemManager() 文件系统中的用户目录路径 wx.env.USER_DATA_PATH FileSystemManager wx.openDocument async openSummary() { try { // 调用自己后台接口,获取数据 let res = await ...
  • 场景 在ji文件获取到的数据呈现在wxml中,需要判断...详细信息可以查看微信小程序官方文档 -> wxs 代码展示 在page文件夹同级下新建utils文件夹,然后wxs文件放在这个文件下 下面是代码逻辑实现 // 判断股票对于当前
  • // &&filename.indexOf(".xlsx") == -1 if (filename.indexOf(".xls") == -1) { //限制文件类型 wx.showModal({ title: '提示', content: '文件类型必须为excel!(.xls)', confirmColor: '#0177ff', confirmText: '...
  • 微信小程序打开项目提示读取project.config.json文件失败 因为装vant库,原文件路径出了问题,我又换了一个文件,就出现这种情况了,很坑。 解决 把小程序开发工具里所有东西都干掉,在hbuilderx重新跑一次就可以...
  • 1.首先建立common.js文件 function myfunc(){ console.log('hhhhh') } module.exports.myfunc = myfunc; //将函数导出来 2.在自己的js文件中引入 var common = require("./common.js"); Page({ data:{ }, ...
  • THINK.config //读取、设置配置文件 THINK.cache/cacheSync //读取、设置本地缓存 THINK.params //读取post、get、data-参数,post优先 THINK.html2json/json2html //htmljson THINK.mixin //非构造函数继承 ...
  • 一个搞了一年小程序开发的前端程序员使用通俗的文字对微信小程序的目录结构的详解以及浅析微信小程序的技术架构。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,032
精华内容 12,412
关键字:

微信小程序读取txt文件

微信小程序 订阅