软装公司网站建设,唐山网站建设找汉狮,大网站制作,wordpress母狗#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; #… 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、小程序页面二、WXML模板三、WXSS样式四、JS 逻辑交互总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第4篇文章; 今天开始学习微信小程序的第二天开启新的征程记录最美好的时刻。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、小程序页面
新建小程序页面 小程序页面创建是非常简单的只需要在 app.json - pages 中新增页面的存放路径微信开发者工具就会帮我们自动创建对应的页面文件。
{pages:[pages/index/index,pages/logs/logs,pages/CshPage1/CshPage1 //只要添加页面存放路径就会自动创建],window:{backgroundTextStyle:light,navigationBarBackgroundColor: #fff,navigationBarTitleText: Weixin,navigationBarTextStyle:black},style: v2,sitemapLocation: sitemap.json
}保存文件之后就能看到新建立的页面文件整个过程还是非常便捷的这里就有个想法了如果把配置文件里路径删除呢会不会把页面文件也删除试一下发现是不行。 修改项目首页 有时候我们不想用 index 来当首页那就把 index 页面改成想要的首页也不是不行但是还有其他简单的方法只需要调整 app.json - pages 数组中页面路径的前后顺序即可修改项目的首页。小程序会把排在第一位的页面当作项目首页进行渲染.
{pages:[pages/CshPage1/CshPage1, //放在第一位pages/index/index,pages/logs/logs],window:{backgroundTextStyle:light,navigationBarBackgroundColor: #fff,navigationBarTitleText: Weixin,navigationBarTextStyle:black},style: v2,sitemapLocation: sitemap.json
}修改之后编译就能看模拟器将 CshPage1 变成了首页。 二、WXML模板
WXML WXMLWeiXin Markup Language是小程序框架设计的一套标签语言用来构建小程序页面的结构其作用类似于网页开发中的 HTML。
WXML 和 HTML 的区别 虽然 WXML 和 HTML 作用很相似都是由标签、属性等等构成。但是很多地方不一样的地方。从下面表格就可以看得出来 WXML 用起来比较有 Vue 的感觉双向数据绑定更好利于开发。
不同点WXMLHTML标签名称view, text, image, navigatordiv, span, img, a属性节点navigator url“/pages/home/home”/navigatora href“#”超链接/a模板语法提供了类似于 Vue 中的模板语法数据绑定、列表渲染、条件渲染等无
三、WXSS样式
WXSS WXSS (WeiXin Style Sheets)是一套样式语言用于描述 WXML 的组件样式看这名字不难猜出其作用类似于网页开发中的 CSS。
WXSS 和 CSS 的区别 WXSS 具有 CSS 大部分的特性小程序在 WXSS 也做了一些扩充和修改。比如新增了 rpx 尺寸单位、样式作用域等。
不同点WXSSCSS尺寸单位view, text, image, navigatorCSS 中需要手动进行像素单位换算例如 rem属性节点提供了全局的样式和局部样式 app.wxss 作为全局样式会作用于当前小程序的所有页面局部页面样式 page.wxss 仅对当前页面生效。无模板语法WXSS 仅支持部分 CSS 选择器 .class 和 #idelement 并集选择器、后代选择器全支持
四、JS 逻辑交互 一个项目仅仅只有界面展示是不够的还需要和用户做交互响应用户的点击、获取用户的位置等等。 在小程序里边我们就通过编写 JS 脚本文件来处理用户的操作。这样就可以小程序中的 JS 文件分为三大类
文件作用app.js整个小程序项目的入口文件通过调用 App() 函数来启动整个小程序;page .js页面的入口文件通过调用 Page() 函数来创建并运行页面function.js普通的功能模块文件用来封装公共的函数或属性供页面使用;总结 感谢观看这里就是微信小程序WXML、WXSS和JS逻辑的简单介绍如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
