![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 72
夏天丫丫
自从穿了格子衫,就立誓成为一名程序员
展开
-
微信小程序(1 初识)
前期准备跟随 官网简易教程 ①申请小程序账号 ②获取AppID ③安装开发者工具 ④ 第一个小程序 (跟随简易教程 就实现了第一个小程序)项目分析微信开发者工具像平时用到的IDE软件相似,讲一下平常用得到的功能。 模拟器 编辑器 调试器 模拟器 打开这个功能我们能看到模拟小程序的现实界面。 编辑器 打开编辑器,右侧将会显示文件结构和代码,用于开发时的代码编辑。调试器 用于代码的调试,打开后原创 2017-12-13 16:46:45 · 629 阅读 · 0 评论 -
微信小程序(2 搭建home页面)
在上篇对小程序的 QuickStart 项目分析之后,了解了整个项目的整体结构,另外在 pages/index 目录中看到了小程序的事件绑定和页面跳转。现在利用现有的知识,新建一个pages/home 目录。1、新建 home 目录在小程序中,每一个完整的页面有包含.wxml .js .json .wxss 四个文件,在开发者工具中,有一种快速创建这四个文件的方法。 pages目录上右键 –>原创 2017-12-15 14:57:42 · 2002 阅读 · 0 评论 -
微信小程序 (3 tabBar及 页面跳转)
上篇文章完成了 home 页面的构建和跳转,这篇文章将会完成底部tabBar 以及点击每个 tabBar 跳转到对应的页面。完成如图:1、 新增 cart discounts my 页面按照 home 页面的构建,快速新建上面的四个页面,并查看 app.json 中是否存在所建页面的配置信息。2、 配置 home cart discounts my tabBar 信息如果一个小程序是一个多应用(客原创 2017-12-19 11:23:00 · 37119 阅读 · 6 评论 -
小程序(4 编写home静态页面 swiper组件、产品item)
目标:导航栏样式及文字更改添加 swiper 组件添加产品item组件完成效果导航栏样式及文字更改在小程序中有两处配置导航栏的文件,分别是app.json 和 pages/xx/xx.json两者都是用来设置页面的状态栏,导航栏,标题,窗口背景色,区别是前者是对全局进行配置,后者只是针对当前的页面进行配置。 在 pages/xx/xx.json 中多了一个 disableScroll 属性原创 2017-12-27 10:39:47 · 1855 阅读 · 0 评论 -
小程序( rpx、px、rem )
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx原创 2017-12-27 11:50:52 · 28053 阅读 · 2 评论 -
小程序(5 home页面完善 数据绑定、列表渲染、模板分离)
数据绑定小程序中的数据均来自于对应Page对的data。绑定会用Mustache 语法(双大括号)将变量包起来,可以用于:内容 <view>{{message}}</view>page({ data:{ message:'hello world' } }) 组件属性 (需要在双引号之内使用)<view id="item-{{id}}"></vie原创 2017-12-27 17:04:29 · 1772 阅读 · 1 评论 -
小程序 template 模版使用方法
小程序开发语言虽然只能运行在微信小程序中, 但是它的设计同样遵循了主流前端框架的主要特征——组件化,在小程序中组件化的实现有两种方式: template 模版 和 Component 组件。 这两种方式分别适用于不同的场景。template 模版 主要用于展示,模版中不涉及事件处理, 需要处理的事件逻辑放在调用模版的页面中。 一个 template 模版 只包含 wxml wxss 文件。C...原创 2019-04-12 13:59:31 · 1777 阅读 · 0 评论