小程序的基础文件目录详解|基础语法详解

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序的基础文件目录详解|基础语法详解

然后解释一下小程序的目录结构。

..json：小程序的配置文件，包括项目打包配置、上传代码自动压缩等。是一些开发、打包等配置。

app.json：当前项目的配置文件。 包括项目的页面介绍、导航栏颜色、导航栏标题等，是项目具体到代码开发的配置。 介绍几种配置：

页面：包含的页面。 每次添加新页面时，必须在此处引入，否则新页面的json配置不会生效。 请注意，页面中的页面首先写入并首先渲染，因此数组中的**项是我们的主页。

：配置所有页面导航栏字体、颜色、背景颜色等。

app.js：小程序入口文件。 生成小程序实例App({})，通常会获取用户信息、授权信息、全局变量等。

app.wxss：小程序全局样式文件。 对整个项目页面有效。 通常会指定项目的字体和基本颜色，并定义一些公共样式。

utils：工具函数目录。 通常用来放置一些公共的js方法。 例如封装请求和其他处理数据的方法。

pages：小程序的页面目录。 所有的小程序页面都写在这里。

5.完善项目目录

以上已经大致说明了小程序的基本文件。 现在我们将按照通用规范完善项目目录。 包含一些个人观点，有需要的可以参考。 我们先看一下结果：

现在解释一下这些目录：

：我们封装的小程序是可复用的组件。

：在某些项目中始终打开。

image：使用的图片。

：所有使用的接口目录

基本上，这些都是新的。 如果还有其他需求，可以根据自己的情况添加。

6. 基本语法详解

下面简单介绍一下小程序的语法。首先，新建一个页面。 默认情况下小程序的基础文件目录详解|基础语法详解，创建 *.wxml *.wxss *.js *.json。 和我们平时写的代码类似。 都是html js css端微信小程序开发，附加了一个json配置文件。

*.json：常用的属性有两个，顶部标题的xt相关设置，以及引用的组件。

*.js:() 获取小程序实例、全局变量等； Page({}) 创建页面； data是当前页面的变量； 生命周期，页面加载。

*.wxml：注意小程序支持的标签很少。 支持 Span，但不支持 div。 一般使用视图代替块级，使用跨度和文本代替行级。

*.wxss：不支持大多数 css 选择器。 好像只支持5个。 如果想支持少一点，就得自己配置了。

// json文件
{
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText":"我的",
 "usingComponents": {
 "menu": "/components/menu/index"
 }
}
// js文件
const app = getApp()
Page({
 data: {},
 
 onLoad: function () {},
})

7.实现页面跳转

和平时的web开发一样，小程序页面跳转页面分为2、wxml中的标签、js相关的API。路由跳转的方法有以下几种。 我这里就不详细说了。 *常用的是直接跳转。

wx.、重定向wx.等，具体请查看官方文档。 这里强调一下路由参数，很简单：

1.数据量小。 直接传问号参数。 然后通过目标页面的方法中的参数接收。

2.数据量大。 直接将其填充到全局变量中。

// wxml跳转页面

  
  {{item.name}}
 
//js跳转页面
wx.navigateTo({
  url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
 })
//路由传参如何接收
 onLoad: function (options) {
　　 console.log(options)
 },

8.wx的封装。

在utils中新建一个.js，简单封装一下，导入一些需要全局配置的数据，然后做一些错误的统一处理。 并不难，但是要特别注意便携性。 具体代码如下：

const app = getApp()
export default function request(url, options = {}) {
 return new Promise(function (resolve, reject) {
 wx.request({
  url: `${app.origin}${url}`,
  method: 'GET',
  ...options,
  data: options.data,
  header: {
  'content-type': 'application/json',
  'cookie': wx.getStorageSync("cookie")
  },
  success: function (res) {
  //重新授权登录
  if (res.statusCode === 401){
   wx.redirectTo({url: '/pages/login/index'})
   return
  }else if (res.statusCode !== 200) {
   reject({ error: '服务器忙，请稍后重试', code: 500 });
   return
  } else {
   if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
　　　　　　　　
   if (cookie) wx.setStorageSync("cookie", cookie);
   }
   resolve(res.data);
  }
  },
  fail: function (res) {
  // fail调用接口失败
  if (url === '/api/cdz/user/weixin/login') {
   const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
   if (cookie) wx.setStorageSync("cookie", cookie);
  }
  reject({ error: '网络错误', code: 0 });
  }
 })
 })
}

然后我们在使用的时候，直接使用封装好的方法，这样所有的API都被封装成函数了。 我们可以直接在页面中引入调用。

import request from "../utils/request";
import { stringify } from "../utils/util"
export function testPost(data) {
 return request(`/api/test/post`, {
 method: 'PUT',
 data,
 })
}
export function testGet(data) {
 return request(`/api/test/get`)
}

9.使用npm（引入weui，其他插件）

由于小程序使用了不完整的浏览器对象，导致很多js包不好用，比如。 所以npm基本没什么用，能用的依赖包也很少。 你必须找出哪些是你自己可以使用的。 这里我还是想介绍一下如何小程序使用npm。 毕竟有些包还是需要用到的。

1.打开微信开发工具--点击详情--勾选使用npm模块

2.打开命令行，进入项目根目录，使用npm init初始化npm。

3. npm 一. 。 .安装你需要的依赖

4.打开微信开发工具--点击工具--点击构建npm。 此时小程序会对文件进行编译打包并生成新的目录。

5、需要使用的页面的js文件中引入const=('')，可以直接使用。

6. *后，记住忽略该文件。 新的 。 files、.json等文件不需要上传。 *好只保留小程序的npm构建包，并使用相同的依赖下载。这个没有必要

ps：特别注意weiui的介绍。 这个ui库是纯css的，没有js文件，所以无法使用npm引入。 相反，它直接下载文件。 我直接扔到根目录下，然后放在一开始引入的app.wxss文件中

@'weui.wxss';，这样使用

10、封装微信小程序可复用组件

这篇文章现在有点太长了，如果有需要的话我会再写一篇文章供大家阅读。

11. 总结

以上是我开发小程序的一些经验和总结。 我希望它能帮助你。 另外，我会上传整个程序的骨架（业务代码已删除）。 如果您需要的话，可以下载。 记得点个赞，哈哈。

*后我会再写一篇关于如何封装小程序组件的博客，并附上我在开发小程序时遇到的陷阱以及相应的解决方案。

以上就是本文的全部内容。 希望对大家的学习有所帮助。 也希望大家支持 Home。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等