首页 > 互联网> 文章详细

【微信小程序低代码开发】二，在实操中化解小程序的代码组成

2022-10-22 11:48:14 阅读：364 来源： 互联网

标签：微信小程序代码文件 pages 创建 wxml html page 函数

一，最小的小程序文件组成

当我们创建一个小程序项目时，开发者工具会自动帮我们创建一些默认的结构，但为了去了解小程序执行时的步骤，我们可以删除这些结构，只留下pages文件如下所示：这时候我们ctrls保存编译一下，会发现它会出现一行报错 app.json: app.json 未找到也就是说编译时，小程序会先去找我们的app.json文件

那么现在我们创建一个app.json文件在根目录下，在里面放上JSON文件的格式，一个大括号包起来，里面不写东西。再保存编译: 报错如下
app.json里的pages是什么？里面配置的是我们页面的路径，那么我们给它填上一个路径这就在告诉编译器，我们的一个页面的路径，这时候编译器并没有报错，但它警告说没有找到我们的app.js文件
在根目录在再添加app.js文件，里面什么都不放，这时候编译成功，这就是一个最小小程序的项目。

app.js文件是小程序项目的入口文件，在编译时，编译器配置全局后，就会去找我们根目录下的app.js文件，通过里面的APP()函数，创建出一个小程序实例

二，与web区别

2.1 WXML和HTML

它与HTML的区别有几点

属性节点在img中，是用属性src存放链接，而在image中，是用url存放

<img src="#">
<image url="#">

多了类似vue的语法什么，没学过？没事，照样学！其实就将渲染和逻辑分离的MVVM模式，在网页的开发中，我们经常通过JS操作DOM，当项目越来越大时，你的代码会充斥着非常多交互逻辑和程序的各种状态变量，这样结构上不是很友好，而MVVM开发模式就是提倡不让JS直接操控DOM，JS只需要作为一个管理者，区别出状态，然后通过模板语法（react、vue）来表述状态与界面结构的关系即可小程序框架也是用到这个思路，如下： WXML可以这样写：

<text>{
         
  {msg}}</text>

JS无需获取变量

this.setData{
          
   {
          
    msg: "Hello World"}}

这种我们称为数据绑定，通过双大括号的方式，将一个变量绑定到页面，我们可以直接在JS对其进行修改，现在可以先了解一下

2.2 WXSS和CSS

新增尺寸单位，在CSS样式中，开发中需要手动用rem对不同屏幕大小进行换算，而WXSS新增的rps可以自动换算像素单位
全局样式也就是app.wxss文件，与之前app开头文件一样，里面说设置的样式，会对所有页面生效，也就是全局样式，而各页面的样式文件，只对该页面生效
WXSS只支持部分选择器类选择器，id选择器，标签选择器，并集选择器，::after和::before

2.3 JS

与用户的交互我们交由JS脚本文件完成，利用之前提到的数据绑定，如我们获取用户的点击状态然后进行响应：

<view>{
         
  {msg}}</view>
<button bindtap="click">点击有好事发生</button>

bindtap进行事件绑定，当点击后会在该页面对应的Page中找到对应事件处理函数

Page({
          
   
	click: function(){
          
   
		this.setData({
          
    msg: "Hello World"})	
	}
)

这些事件和组件的使用后面会边应用边讲解

在项目结构中，也有各个层次的JS文件

如前面提到的app.js文件，是整个项目的入口文件，小程序将调用里面的App函数，将小程序实例化并运行各页面文件夹下的的.js文件，调用里面的Page函数，实例化并运行页面还有一个utils文件夹下的普通JS文件，这是功能模块文件，常常用来封装公共的函数和属性

三，配置文件JSON

3.1 app.json

3.1.1 创建新页面Pages

上面说到的app.json就是配置全局的静态数据，像是里面的pages属性，里面存放页面的路径

上一章我们讲过在一个页面文件中需要有四个不同类型的文件，但是我们不需要一一创建

只需要在pages文件夹上创建一个文件夹，然后右键新建的文件夹选择新建page

填入我们想要的文件名，如index，我们会发现，它会自动帮我们新建那四个文件，同时，在app.json中，开发者工具会自动在pages中添加新建页面的路径

3.1.2 修改项目页面首页

小程序会将全局配置文件app.json下pages的第一个页面默认为首页，如果需要更改首页，只需在首页的路径换到pages的第一行即可

{
          
   
	"pages"[
		"pages/list/list",
		"pages/index/index"
	]
}

3.1.3 app.json其他全局配置

window 配置小程序所有页面的顶部用于设置状态栏，导航条，标题，窗口背景色等这里介绍几个比较常用的

navigationBarBackgroundColor 设置值为十六进制的颜色值，设置导航仪背景颜色
navigationBarTextStyle 标题颜色设置，不过只支持white和black
navigationBarTitleText 标题文本设置

例子展示：

{
          
   
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ],
  "window": {
          
   
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个小程序"
  }
}

tabBar 底部tab栏设置主要用到的属性有

list 底部列表，最少放俩个，最多放五个
color 文字默认颜色
selectedColor 被选择是文字颜色
backgroundColor tab背景颜色颜色需要使用十六进制颜色值

展示：

"tabBar": {
          
   
    "list": [
      {
          
   
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
          
   
        "pagePath": "pages/list/list",
        "text": "目录"
      }
    ],
    "color": "#fff",
    "selectedColor": "#999",
    "backgroundColor": "#111"
  }

全局配置的属性很多，这里先做一个了解

3.2 project.config.json

项目的配置文件，项目的公共配置会写在里面，如项目名字，项目的appid，源码目录等等其实还有一个文件叫project.private.config.json，里面会写项目的个人配置

3.3 sitemap.json

标签：微信,小程序,代码,文件,pages,创建,wxml,html,page,函数
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9