资讯专栏INFORMATION COLUMN

微信小程序(一)

Imfan / 582人阅读

摘要:微信小程序一介绍微信小程序可以说是网页的进阶版,同样的功能,它可以更加便利。微信小程序是需要下载的,但是微信审核要小程序代码一下,所以这个下载相当于不用下载。

微信小程序(一) 介绍

微信小程序可以说是网页的进阶版,同样的功能,它可以更加便利。微信小程序是需要下载的,但是微信审核要小程序代码1M一下,所以这个下载相当于不用下载。

小程序官网地址

微信小程序对比软件:

小巧轻便,无需下载那么繁重

一个版本,所有手机通用

但是没有软件功能那么多

微信小程序对比网页:

更加好传播

访问时代码在本地,跳转其他页面时加载无需再次从云端访问,所以跟加快

小程序有许多系统自带的空间,所以流畅度上是比网页更加好的

对于用户来说:

微信小程序更加便利,它小巧,功能强大,访问快捷,微信审核是需要1M以下的,所以打开加载也非常的快,在微信上就可以使用其他软件的功能无需下载多一个软件切换使用

对于开发者来说:

一个版本就可以所有型号的手机都适配,无需再重新编译个其他语言的版本。几乎是把前端取其精华,去其糟粕。

环境

编译器

使用微信小程序需要在官网下载个微信小程序的编译器,虽然也不一定要微信官方的,用vscode或HbuilderX也行,但是微信官方的对编译和预览方面比较方便。

官方下载地址

下载完之后直接安装使用即可

开始小程序

开始小程序需要一个小程序开发资格的账号,去官网注册一个即可小程序官网地址

注册完之后将找到其中的AppID记录一下,以后会用到

然后打开编译器,使用注册了微信小程序资格的微信账号登陆就会出现初始页面

选中小程序

如果只是学习的文件不需要上线的就可以使用测试AppID

资料填完以后会出现个初始化页面,会出现预览框,代码框,和控制台

代码框的侧边栏有几个文件pages,index,utils,logs,app.js,app.json,app.wxss,project.config.json,sitemap.json

pages文件放的是所有文件,相当于根目录,app.js是全局脚本文件,app.wxss是全局样式文件,app.json是全局配置文件,里面包含一个pages属性和window属性,pages属性是访问路径设置,window属性是全局窗口配置,当然,优先级是本文件夹中的json文件为标准

index文件存放的是index.wxml,index.wxss,index.js,index.json,前三个文件相当于前端网页的html文件,css文件,js文件,json文件存放的是index文件夹内的文件配置,看到名字index可以明显知道这个是主页面,但是不是像前端一样把主页面文件设置为index就是主页面,而是在app.json的pages对象内排列顺序,排第一位的就是主页面

logs文件存放的是自带写好的启动日志文件

注意:在json文件中不允许有注释,并且对象最后一个属性后面不能接逗号,在前端中对象最后一个是可以接逗号的,但小程序中不允许

快速创建一个文件

右键pages文件夹,也就是根目录,新建一个目录

在新建的目录中右键新建一个page,这时候输入名字回车就会新建好所有配置文件,包含wxml,wxss,js,json文件

常用的语法

详情参考微信开发文档

wx:for:循环,类似于vue中的v-for的作用,在小程序中,js文件也有个对象,里面有个data属性,作用与vue的一样,存放变量。在wx:for中,有两个类似于形参一样的东西,item,indexitem就是代表循环对象的value,index就是循环对象的key。

例子{{ item }}=>{{ index }}

注:在小程序中很多标签做作用和h5的一样,但做了语义化调整,像view就是div

wx:for-item/key:循环数组或对象时代表其值/下标的形参指定别名

例子{{ value }}=>{{ key }}

wx:if:为标签添加条件

例子 show:10数据是 {{ show }}

wx:elif:此标签与if配套使用,中间不可以有其他标签,这个标签就是else-if的缩写,所以作用一目了然

wx:else:此标签与if/elif配套使用,中间不可以有不是配套的标签穿插其中,这个标签作用很明显就是else的作用

wx:key:如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

注意:如果不使用wx:key的话会有个警告,Now you can provide attr `wx:key` for a `wx:for` to improve performance.意思是如果使用wx:key可以提升性能。因为如果不使用wx:key的话列表是删掉重新渲染,使用的话是保留状态重新排序,在效率上加wx:key会有所提升。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105810.html

相关文章

  • 微信应用号(小程序)资源汇总(1010更新)

    摘要:微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 wechat-weapp-resource 微信应用号(小程序)资源汇总。 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

    赵春朋 评论0 收藏0
  • 微信应用号(小程序)资源汇总(1010更新)

    摘要:微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 wechat-weapp-resource 微信应用号(小程序)资源汇总。 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

    piapia 评论0 收藏0
  • 信小程序资源汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里,也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

    Olivia 评论0 收藏0
  • 前端资源系列(3)-信小程序开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<