微信小程序学习总结(一)项目创建与目录结构分析

 更新时间:2020年06月04日 10:12:14   作者:huangyuxin_  
这篇文章主要介绍了微信小程序学习总结(一)项目创建与目录结构,总结分析了微信小程序项目创建、配置方法以及目录结构、文件功能,需要的朋友可以参考下

本文实例讲述了微信小程序项目创建与目录结构。分享给大家供大家参考,具体如下:

首先,放上微信公众品台的网址https://mp.weixin.qq.com/,下面内容完全可以跟着做。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
下载开发工具。

创建项目

如图所示

这里写图片描述

选点此校验就行啦,右边有个详情也点开瞅两眼。

这里写图片描述

上传测试和腾讯这块点不了是为啥呢,因为你创建项目的时候没有填写AppID,下一题。

具体的东西下载下来瞅瞅点点就行。下面介绍结构。

目录结构

这里写图片描述

1.wxml相当于html,wxss相当于css

2.在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成改页面所需要的文件

这里写图片描述
同样里面也会生成四个文件,且与文件名同名的文件。

这里写图片描述
3.ctrl+s相当于点击编译

4.外面的四个文件相当于全局文件,那么是听谁的呢,当然是就近原则了,离谁近受谁影响

例子:在index.wxml写上这么一句<text>hello world </text>,在index.wxss中写上text{ color:red; },在全局wxss中写text{ color:blue; },结果颜色为红色啦。

5.json文件是来干嘛的呢。我们来看官方的解释。app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

第一部分pages

这里写图片描述
接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

第二部分window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

这里写图片描述
很给力!

希望本文所述对大家微信小程序设计有所帮助。

相关文章

  • 4种JavaScript实现简单tab选项卡切换的方法

    4种JavaScript实现简单tab选项卡切换的方法

    这篇文章主要介绍了4种JavaScript实现简单tab选项卡切换的方法,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 小程序实现页面跳转与数据传递方案

    小程序实现页面跳转与数据传递方案

    在开发过程中经常会遇到在微信小程序的页面跳转以及数据传递的知识点,所以下面这篇文章主要给大家介绍了关于小程序实现页面跳转与数据传递的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • JS限制input框只能输入0~100的正整数的两种方法

    JS限制input框只能输入0~100的正整数的两种方法

    本文给大家分享两种方法实现JS限制input框只能输入0~100的正整数,方法二是直接通过设置三个属性,type、min、max即可,就可以设置0~100的整数,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • JavaScript bind函数手写教程

    JavaScript bind函数手写教程

    bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,当然这是绑定哦,不是像call、apply一样直接执行,apply要执行的话还得自己调用
    2022-12-12
  • 微信小程序实现带参数的分享功能(两种方法)

    微信小程序实现带参数的分享功能(两种方法)

    本文通过两种方法给大家介绍微信小程序实现带参数的分享,需要的朋友可以参考下
    2019-05-05
  • 一文带你了解一下JavaScript中什么是严格模式

    一文带你了解一下JavaScript中什么是严格模式

    严格模式是 ECMAScript 5 引入的一种运行模式,可以让 JavaScript 在更加严格的条件下运行,本文主要为大家详细介绍了JavaScript中严格模式的使用,需要的可以参考下
    2023-11-11
  • Bootstrap标签页(Tab)插件使用方法

    Bootstrap标签页(Tab)插件使用方法

    这篇文章主要为大家详细介绍了Bootstrap标签页(Tab)插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript实现动态网页时钟

    JavaScript实现动态网页时钟

    这篇文章主要介绍了JavaScript实现动态网页时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • js字符串操作方法实例分析

    js字符串操作方法实例分析

    这篇文章主要介绍了js字符串操作方法,实例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript截屏功能的实现代码

    JavaScript截屏功能的实现代码

    我觉得使用JS截图的想法是非常荒谬的,首先JS没有权限调用操作系统的截图功能,其次,浏览器(BOM)也没有提供相关的截图接口,经过一番折腾,有点思路了,下面通过实例代码给大家简单介绍下js 截屏功能的实现代码,一起看看吧
    2017-07-07

最新评论