微信小程序开发之创建一个自己的项目和项目目录下各个文件的了解

1、小程序开发工具基础

(1)菜单栏:可以对开发工具进行一些简单的设置,还可以在帮助一行获取学习相关api文档

(2)模拟器显示栏:每当我们在进行便写好代码之后,通过编译可以在模拟显示栏上看到效果、

(3)代码编辑栏:对于业务需求,编写我们所需要的相关代码的地方。

(4)编译栏;主要的作用就是我们在编译的过程中可以看到编译的细节,包括编译出现的错误等等。

2、创建一个项目


备注:appid在邮箱注册的微信小程序中

3、项目的具体结构

(1)page:page页面,存放小程序的所以页面

(2)Utils:存放工具性质的模块

(3)app.js:小程序项目的入口文件

(4)app.json:小程序项目的全局配置文件、

(5)app.wxss:小程序项目的格式样式文件

(6)project.config.json:项目配置文件

(7)sitemap.json:用来配置小程序或者页面是否允许被微信索引

3.1page页面的详解

每个页面都是以单独的文件夹组成;每个文件夹包括四个部分

(1) XXX.js:页面的脚本文件,存放页面的数据、事件处理函数

(2)XXX.json:当前页面的配置文件,配置窗口的外观、表现等

(3)XXX.wxml:当前页面的模板结构文件

(4)XXX.wxss:当前页面的样式表文件

4 小程序代码的详解

4.1JSON配置文件

json是一种数据格式,在小程序开发中充当配置的作用,小程序开发中json一共有四种构成

(1)app.json

app.json是全局配置,包括小程序所有页面的路径、窗口外观、界面的表现、底部的tab 等等

(a)page配置项

用来配置当前小程序的所有页面的路径

(b)window配置项

全局定义小程序所以页面的背景色和文字颜色等等

(c)style配置项

全局定义小程序组件所使用的样式版本

(d)sitemaplocation配置项

用来指明sitemap.json的位置

(2)project.config.json

project.config.json配置主要是记录小程序开发工具所做的个性化设置

(a)seting配置

保存了编译相关的配置

(b)appid配置

保存了微信小程序账号appid

(3)页面.json

对于页面的窗口外观进行配置,页面的配置会覆盖app.json中的配置

(4)sitemap.json

sitemap.json页面主要的作用就是配置小程序页面是否被允许微信索引

注意:sitemap的索引提示默认是开启的,如果需要关闭,在project.config.json文件中的setting配置项中checkSiteMap:false

5 新建一个小程序页面

在app.json中page配置项目添加一个自己想要新建的页面,如下图,然后保存后,pages文件夹下就会自动生成新建的页面

如何修改项目首页?
在app.json文件中的pages配置项中的顺序对换,就可以进行项目首页的修改

6 了解wxml模板

6.1什么是wxml

wxml是小程序设计的一套标签语言,用来构建小程序页面的结构。其本质与网页设计的html类似

6.2 wxml与html的区别

(1)标签名称不同

  • html(div、span、img、a)
  • wxml(view、text、image、navigator)

(2)属性节点不同

  • <a href="超链接"></a>
  • <navigator url="pages/list/list"></nabigator``>

(3)提供类似于vue中的模板语法

  • 数据绑定
  • 列表熏染
  • 条件渲染

7 了解wxss

7.1什么是wxss

wxss是一套样式语言,用于描述wxml的组件样式,与网页中的css类似。

7.2 wxss与css的区别

(1)新增了rpx尺寸单位
  • css中要手动进行像素的单位换算,例如rem

  • wxss底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

    (2)提供了全局样式和局部样式

  • 项目中的app.wxss会作用与所有小程序页面

  • 局部的页面.wxss只会作用与当前页面

    (3)wxss仅支持部分css选择器

  • .class和#id

  • element

  • 并集选择器、后代选择器

  • ::after和::before等伪类选择器

8 了解.js文件

8.1 小程序中的.js文件

在小程序中我们仅仅是看页面是不够的,需要小程序通过.js文件来处理用户的数据,例如响应用户的点击、和获取位置等等。

8.2 小程序中的js文件分类

  • app.js文件
    是整个小程序的入口文件,通过调用app()函数来启动整个小程序。
  • 页面中的js文件
    是页面的入口文件,通过调用page()函数来创建并运行页面。
  • 普通的js文件
    是普通的功能模块文件,用来封装公共函数或属性供页面使用。
相关推荐
丁总学Java8 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域9 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8689 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650210 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦17 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac19 小时前
微信小程序的组件
微信小程序
stormjun21 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck21 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong1 天前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序