一个人开发一个产品,小程序从0到1,第4章页面文件(代码片段)

伴码 伴码     2022-12-24     302

关键词:

一个小程序应用,由index,logs等多个页面组成。一个页面,包含4个同名,不同后缀的文件,它们分别是负责配置的json,布局的wxml,样式的wxss和业务逻辑的js。其中,wxml和js是不可删除,是必须有的文件。

4.1 index.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。

 

以上属性的含义跟app.json里的是一模一样的,我就不重复讲了,再讲的话,怕你用时间跟我换金钱。


  "navigationBarTitleText": "首页",
  "navigationBarTextStyle": "black"

我没钱,只好说下页面json文件才有的disableScroll和usingComponents属性。disableScroll默认为false,设置为true时页面不能上下滚动。usingComponents用来引入第3方组件,唯有在json文件中引入的,才可以在wxml文件中使用。这个只是示例代码,等讲到组件时,就自然明白了。


  "usingComponents": 
    "mp-cells": "../../components/cells/cells",
    "mp-cell": "../../components/cell/cell"
  ,
  "disableScroll": true

4.2 index.js

在页面js文件中,可在Page()里面指定页面的初始数据、生命周期回调、事件处理函数等;可在外面引入模块和getApp()等。

const util = require(\'../../utils/util.js\')
const app = getApp()

Page(
  data: 
    motto: \'Hello World\'
  ,
  //自定义函数
  bindViewTap: function() ,
  //页面加载时触发
  onLoad: function() 
)

初始化数据的data,在页面第一次渲染时使用。自定义函数bindViewTap,绑定页面组件,在用户触发时调用。onLoad为生命周期函数,在页面加载时触发,可通过this调用自定义函数。有关函数的更多内容,咱骑驴看唱本,走着瞧。

4.3 index.wxml

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出wxml页面的结构。关于WXML的更多内容,在后面会花多点篇章、花多点时间、花多点心思进行详细的介绍。

<!—pages/index/index.wxml-->
<view class="container">
    <text class="user-motto">motto</text>
</view>

4.4 index.wxss

在page的 wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

/**index.wxss**/
.userinfo 
  display: flex;
  flex-direction: column;
  align-items: center;


.userinfo-avatar 
  width: 128rpx;
  height: 128rpx;


.usermotto 
  margin-top: 200px;

能坚持看到这的人,都是能做事的码农,如果能答对我要问的问题,肯定会让他人佩服得五体投床的。那么问题就来了:仔细观察上面index.wxss里的内容,猜一猜哪一个东西在CSS是没见过的?

没错,rpx在CSS里是不曾有过的,你猜对没?--如果猜对的话,我就五体投床去了,如果没猜对的话,我就五体投床去了,因为五体投地还得洗衣服。

rpx为小程序特有的尺寸单位,可解决屏幕宽度进行自适应的问题。它以屏幕宽为750rpx为基准。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

猜对上面问题的人,给你10分钟,一边嘚瑟去吧。没猜对的人,赶紧抓紧机会,猜猜.userinfo和.usermotto用的是哪种选择器?

没错,答案就在下表中。你真聪明!

好了,项目文件就这样了,没什么要说的了。如果你还没搞懂的话,就从头到尾再多学几遍,如果你还没搞懂的话,就从头到尾再多学几遍,直到能去基础语法为止。

一个人开发一个产品,小程序从0到1,第6章常量变量(代码片段)

程序总得要处理数据,处理数据就要用到内存,至于内存的大小和地址,由变量指定。变量,就是在程序运行过程中它的值是允许改变的量。常量被视为与常规变量一样,不同的是常量的值在定义之后就不能进行改变。6.1常量在... 查看详情

一个人开发一个产品,小程序从0到1,第1章开发工具

...,其较低的开发成本和微信庞大的用户量,为许多企业和个人提供了商机。为了帮助开发人员简单地新建项目,高效地开发微信小程序,微信团队提供了一套微信开发者工具。1.1 下载安装在微信官方文档.小程序(https://develope... 查看详情

「4.0」一个人开发一个app,小程序从0到1,布局

...是哪个君王,我倒可以非常认真,非常坦诚地告诉你,那个人不是我,也不是你。否则我们哪有时间在这里用小程序布局手机界面。一个小小手机界面,就有很多花样,那跟大饼脸脸一样大的平板,不是需要花费更多功夫?其实... 查看详情

[3.0]一个人开发一个app,小程序从0到1,删减添加

在这个黄道吉日,咱们将要干一件,惊天地泣鬼神,妇孺皆知的大事,那就是删掉微信开发工具自动生成的源代码。删掉pages下的index、logs目录,啥都不留;删掉utils下的util.js,只流空气;删掉app.js里的代码,只留App();删掉app.wxs... 查看详情

「1.0」一个人开发一个app,小程序从0到1,起航了

古有,秦、齐、楚、赵、魏、韩、燕七国争雄;今有,微信、QQ、百度、支付宝、钉钉、头条、抖音七台争霸。古有,白起、李牧、王翦、孙膑、庞涓、赵奢、廉颇驰骋疆场;今有程序员1,程序员2,程序员3…编写代码。逝... 查看详情

从0到一开发微信小程序—小程序框架配置(代码片段)

...生命周期函数1.2.2、页面的Data对象其他相关文章从0到一开发微信小程序(1)——申请账号并安装开发环境从0到一开发微信小程序(2)——开发第一个小程序从 查看详情

微信小程序开发从0到1~入门篇(代码片段)

...账号申请完成之后,建议务必要申请一个测试号用来开发)3. 安装开发工具3.1选择稳定版 3.2选择根据自己电脑配置进行下载4.你的第一个小程序4.1创建小程序项目 4.2目录结构介绍4.3给小程序新增一个页面4.4给小程序当... 查看详情

第一个入门级小程序

...结构1.项目配置文件2.主体文件3.页面文件4.其他文件三、开发者工具功能介绍1.菜单栏2.工具栏3.模拟器4.编辑器5.调试器四、推荐小程序(欢迎各位大佬指导)一、第一个入门级小程序1.新建项目步骤1双击微信web开发者工... 查看详情

利用低代码从0到1开发一款小程序(代码片段)

目录1搭建开发工具2创建项目3功能开发4后端实现5大龄人员想入门编程,年龄是个问题么总结上周在交流群里和一位低码厂商的技术负责人交流,他认为低代码作为开发工具类的产品,需要有从0到1体系化的教程才可... 查看详情

利用低代码从0到1开发一款小程序(代码片段)

目录1搭建开发工具2创建项目3功能开发4后端实现5大龄人员想入门编程,年龄是个问题么总结上周在交流群里和一位低码厂商的技术负责人交流,他认为低代码作为开发工具类的产品,需要有从0到1体系化的教程才可... 查看详情

微信接龙最后一个人怎么删除

...点击删除接龙即可成功操作。参考技术A微信接龙最后一个人怎么删除第一种就是进入到微信页面,从屏幕顶部往下滑动。第二种就是在“发现”页面,这里也可以直接点击【小程序】进入。在“我的小程序”里面的所有小程序... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

...章什么是微信小程序?介绍小程序的特点与适用场景、对开发者的影响以及课程特色!七月老师小程序进阶课《纯正商业应用——微信小程序实战》与《微信小程序商城构建全栈应用》已上线,全面进阶小程序!第2章小程序环... 查看详情

从0到一开发微信小程序—小程序框架配置(代码片段)

...程序中新增/减少页面,都需要对pages数组进行修改。开发目录ÿ 查看详情

java仿短视频小程序全栈开发实战视频教程+课程代码

...小程序前后端通信第4章产品介绍与数据库规划介绍第5章开发用户登录注册与用户信息第6章上传视频业务流程开发第7章视频展现页开发第8章开发视频的留言板第9章开发短视频后台办理体系第10章项目上线与发布下载地址:百度... 查看详情

html5从入门到精通的内容介绍

...页面10  1.4.4使用浏览器浏览HTML文件14  1.4.5使用HTML开发的明日图书网14  1.5小结15  1.6习题16  第2章HTML文件基本标记17  教学录像:44分钟  2.1HTML头部标记18  2.2标题标记<title>18  2.3元信息标记<meta>19... 查看详情

一个人去开发一个网站

大致流程:1、确定需求(产品经理)2、设计页面(前端UI设计师)3、切成静态页面包括页面效果(前端工程师切割html、js、jquery等)4、后台程序编写(后端工程师、包括数据库设计、php、mysql等)5、购买域名6、购买服务器7、... 查看详情

开发微信小程序需要注意些啥问题

...付的小程序,只能用企业为主体来注册。反之,则企业、个人均可注册。2、分析讨论、需求对接对开发需求进行分析,整理成需求文档,再与开发团队就需求文档进行技术性讨论,优化调整开发需求,确定最终的需求文档,与... 查看详情

项目开发流程(代码片段)

目录第一节:项目开发流程BBS-个人博客项目完整搭建项目开发流程一、项目分类二、项目开发模式分类1、瀑布开发模式2、敏捷开发模式3、项目开发流程4、BBS多人博客项目基本功能和需求5、项目程序设计第一节:项目开发流程... 查看详情