精华内容
下载资源
问答
  • 微信小程序图片素材,
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 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()这个方法。

     

    五:总结

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

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

    展开全文
  • 微信小程序CSS样式图片闪烁 微信小程序直接用CSS样式图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twinkling 2s infinite ease-in-out;} @-webkit-...

    微信小程序CSS样式图片闪烁

    微信小程序直接用CSS样式让图片闪烁起来!!!

    废话不多说!直接上代码

    // 这是设置小程序WXSS页面
    .shanshuo{-webkit-animation: twinkling 2s infinite ease-in-out;}
    @-webkit-keyframes twinkling{0% {opacity: 0; }100% {opacity: 1; }
    }
    
    展开全文
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 分享一款好用的微信小程序图片裁剪demo,根据手势滑动放大缩小图片,裁剪矩形框中的图片,好东西大家一起分享
  • 主要介绍了微信小程序 图片边框解决方法的相关资料,需要的朋友可以参考下
  • 下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示: 方法一:button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边。 方法二:background-image background-...
  • 主要为大家详细介绍了微信小程序图片横向左右滑动的案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序 图片等比例缩放(图片自适应屏幕)的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序图片宽100%显示并且不变形的相关资料,需要的朋友可以参考下
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...

    做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。

    微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:

    在这里插入图片描述

    这里就是做微信小程序开发的全部官方文档。

    知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:

    第一步:

    下载微信小程序开发者工具并安装,下载路径:

    https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    进到下载界面后,根据自己的操作系统选择相应的链接进行下载,下载完成后进行安装。

    第二步:登录工具

    开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,入下图,用手机微信扫一扫后确认登录就可以了。
    在这里插入图片描述

    第三步:创建一个项目

    登录成功后,如果是第一次使用该工具会弹出创建项目的窗口,如下图:
    在这里插入图片描述
    ​ 在创建过程中,如果选择的本地文件夹是个空文件夹会出来一个勾选项“在当前目录中创建quick start项目”,为方便初学者了解微信小程序的基本代码结构,请勾选此项,勾选后,开发者工具会帮助我们在开发目录里生成一个简单的 demo,如下图:
    在这里插入图片描述

    第四步:项目代码结构解释

    在这里插入图片描述
    点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

    下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

    ​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    我们注意到,在实例程序的代码中还有2个文件夹,一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.

    第五步:小程序页面文件构成

    在这个示例中,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

    ​ index.wxml 是页面的结构文件:

    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    本例中使用了、、 来搭建页面结构,绑定数据和交互处理函数。

    ​ index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })
    

    index.wxss 是页面的样式表:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    ​ index.json 是页面的配置文件:

    ​ 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

    ​ logs 的页面结构

    <!--logs.wxml-->
    <view class="container log-list">
      <block wx:for-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    

    logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点

     //logs.js
    var util = require('../../utils/util.js')
    Page({
      data: {
        logs: []
      },
      onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(function (log) {
            return util.formatTime(new Date(log))
          })
        })
      }
    })
    

    运行结果如下:
    在这里插入图片描述

    第六步:手机预览(只有获得AppId的才有权限预览)

    ​ 开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。
    在这里插入图片描述
    以上是微信小程序前端开发的基本流程,而实际上要做一个内容可以更新的小程序,单有前端开发是远远不够的,还需要后台开发。后台开发与web开发的后台基本无异,可以选择用java、php、nodejs等任一语言,有一点需要注意的是小程序后台服务器必须是https协议的,这就要求必须购买云服务器并将后台服务器设置成https服务。

    展开全文
  • 微信小程序样式

    2018-05-27 20:37:27
    微信小程序样式有代码有图有真像 微信小程序样式有代码有图有真像
  • 微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序) 打开微信小程序官网:https://mp.weixin.qq.com/ 并登陆 4.项目打包 打包后运行在微信小程序工具 才不会报错,如果报错app....
  • 微信小程序样式源码

    2018-11-27 18:29:49
    关于微信小程序商城样式源代码关于微信小程序商城样式源代码
  • 微信小程序-v2ex 前言 微信小程序 如果还不知道微信小程序的,请这边了解官方文档. 最新版0.9.092300(下载按钮被箭头挡住,需要审查元素找到下载链接),已经可以支持绝大部分api的调试,不需要再破解了。 运行 下载...
  • 主要介绍了微信小程序图片右边加两行文字的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 010-第一章第十节-微信小程序中的样式 011-第二章第一节-微信小程序中的网络请求与列表绑定 012-第二章第二节-微信小程序项目实战之项目介绍与初始化 013-第二章第三节-微信小程序项目实战之用户登录模块布局 014-第...
  • 转载地址:(微信小程序微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人GitHub(喜欢的还请点个Star、...
  • 微信小程序Demo:仿麦当劳微信小程序
  • > 博客-微信小程序(爬坑专用) >小程序开发文档 入坑准备 js支持ES6 微信小程序的与众不同 .wxml:微信html文件 .wxss:微信css文件 响应式像素单位-rpx(responsive pixel),比rem好用:1rpx = 屏幕宽度/750 ...
  • 微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一、从网络上传入以下Json数据格式的数组 1.标题title 2.图片地址 3.数量num ...
  • 微信小程序图片布满整个窗口 在做微信小程序或者微信公众号前端时候,经常遇到一张图片当做背景,布局整个窗口,有时图片不能占满窗口 <view class="imagediv"> <image src="/static/image/start.png" ...
  • 微信小程序——会面APP 原APP下载地址 http://www.zzradio.cn/plus/view.php?aid=8163 公司项目,用来提供接口学习小程序开发。 开发样式比较丑陋。。。。勿怪 小程序开发注意事项 本DEMO未完善事项 1、下拉加载,无...
  • 微信小程序-豆瓣电影-测试案例 1、app.js 封装请求方式函数 fetchApi 2、app.json 配置文件(配置页面样式、多少页面、菜单按钮) 3、app.wxss 全局样式文件(定义页面的全局样式) 4、效果图 5、填入appid后保错...
  • 取消 推荐搜索 国产数据库 请输入关键词进行搜索 搜索-微信小程序模板、微信小程序页面成品、下载即用、布局、样式、JS分离 ... 微信小程序模板、微信小程序页面成品、下载即用、布局、样式、JS分离
  • 微信小程序(WXSS样式文件)+微信小程序(WXSS选择器) 微信小程序(WXSS样式文件):大纲 (1)WXSS简介 (2)分类 (3)尺寸单位rpx (4)样式导入@import (5)style内联样式 (6)WXSS选择器 (7)开发工具设置 ...
  • 微信小程序Demo:Github微信小程序
  • 主要介绍了微信小程序 button 的样式设置为图片的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序-emoji评论 说明: 实现了emoji评论功能。 数据接口: 使用本地数据 目录结构: pages — 存放项目页面渲染相关文件 utils — 存放js库和日期格式化文件 iconfont — 存放样式文件 images — 存放图片...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,110
精华内容 17,244
关键字:

微信小程序图片样式

微信小程序 订阅