一，与其他网页的不同

所有浏览器的 API 都不能使用，只能用微信提供的 API

小程序是什么？学习小程序之前，先简单说一下，它到底是什么。字面上讲，小程序就是微信里面的应用程序，外部代码通过小程序这种形式，在微信这个手机 App 里面运行。但是，更准确的说法是， 小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以，小程序页面本质上就是网页。小程序的特殊之处在于，虽然是网页，但是它不支持浏览器，所有浏览器的 API 都不能使用，只能用微信提供的 API。这也是为什么小程序只能用微信打开的原因，因为底层全变了。

二、知识准备，你需要学习什么内容

java css HTM;

由于小程序基于网页技术，所以学习之前，最好懂一点网页开发。具体来说，下面两方面的知识是必需的。

（1）JavaScript 语言：懂基本语法，会写简单的 JS 脚本程序。

（2）CSS 样式：理解如何使用 CSS 控制网页元素的外观。

此外，虽然 HTML 标签和浏览器 API 不是必备知识，但是了解浏览器怎么渲染网页，对于理解小程序模型有很大的帮助。

总的来说，先学网页开发，再学小程序，是比较合理的学习途径，而且网页开发的资料比较多，遇到问题容易查到解决方法。但是，网页开发要学的东西太多，不是短期能掌握的，如果想快速上手，先学小程序，遇到不懂的地方再去查资料，也未尝不可。

三、一个小程序的项目文件结构

一、小程序项目的基本组成

1.pages 用来存放所有小程序的页面/

2.utils 用来存放工具模块，如时间格式化工具自定义模块等

3.app.js/app.ts 小程序项目的入口

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

5.app.wxss 小程序项目的全局样式文件

6.project.config.json 项目的配置文件

7.sitemap.json 用来配置小程序及其页面是否允许被微信索引

作者：移动端开发

链接：https://www.jianshu.com/p/ac5f7f32a66e

我们分别对其1到7加以解释

一Pages

如图，在我们新建项目时会帮我们自动生成两个文件。index和logs。对于这两个文件夹我们都可以删除，（最好不要）。在这里新建文件作为你想要的不同的小程序的页面。例如一个小程序要实现登录，搜索，浏览新闻。则可以定义三个文件分别实现对应功能。实现了模块化。以后要对其更改就简单方便多了

------注意事项

在我们新建页面时，要先在目录pages下新建文件夹，在到app.json中的pages中添加我们的路径。

在删除文件时，需要在app.json中删除路径。如果报错，请在这个地方清楚一下缓存再退出

二utils 

utils最大的好处就是能够定义公共的模块，公共的数据和使用wxs语言

utils

我在这里定义了文件commn这是我用来存储所有页面都需要的数据，一般是接口，公共数据类。当我的接口改变时我就不用一个个的页面修改，而是直接

在这里统一修改

config.js foodcare.js

从上两张图可以看到，数据都被定义到module.exports中的字典内，

那么我们如何使用呢？

foodcare.js

如上图所示，我们可以用require直接取数据，如在config.js中定义了host,foodlist.。也可以用pic作为一个整体，你想要哪

个数据，就直接pic一点加上你想要的数据

在微信开发者工具所用的语言中，不仅有js也有wxs。我们的wxs是能够直接在小程序的html页面上使用的，然而js不能够，下面看看如何使用wxs

wxs

<!-- 分类列表 -->

<wxs src="../../utils/str.wxs" module="tools" />

使用完整为

<wxs src="../../utils/str.wxs" module="tools" /<view class="fenlei">  <view class="fenlei-item" wx:for="{{itemARR}}" wx:key="index">    <navigator  hover-class="none"  url="../foodtype/foodtype?id={{tools.my_slice(item.id,3,4)}}" >

我们在这里使用了一个函数my_slice但事实上我们所调用的仍然是js中的函数toString，在这里我们同样用了moudle.exports来引入这个my_slice:my:my_slice这里使用了键值的方式来引用。那么就意味的你想在外面使用函数时就直接my_slice即通过键来就行。

使用时先 <wxs src="../../utils/str.wxs" module="tools" />。路径和module是临时命名

 <navigator  hover-class="none"  url="../foodtype/foodtype?id={{tools.my_slice(item.id,3,4)}}" >

这里就有tools.my_slice（参数）

我们在微信小程序中使用的时间，年月日就通通使用在整个小程序中

util.js

三 app.js

app.js中的为什么？APP这里有什么？

有globalData这里能够定义全局变量。看这里有三个cityname,num,userinfo。我们在各个页面后都能把这三个变量改变，定义。

在各个页面的js中使用

下面看看如何使用

页面的.js

同样我们用let app=getApp():获取app.js中的内容。然后我们使用(app.globalData.cityname）来使用全局变量。同理，若想使用app.js中的函数http.那就app.http()

注意

在使用时会有一些报错

下面是定义在app.js中关于请求的函数。在使用success时要用箭头函数。还有this指针指向时我们用了that来代替。var that=this。做了一个替换。那么在页面的js时使用时就得http(,this,)传入参数this了

  http(url,that,arr){

    // var that=this;

    wx.request({

      url:url,

      success:(res)=>{

        wx.showLoading({

          title:"加载完毕",

          duration:500

        })

        if (res.data.status==200 ) {

          that.setData({[arr]:res.data.data})   

          console.log(res.data);    

四 app.json 

app.json是我们来配置小程序的外观等一些基础配置里面有

pages，window tarbar。

除了小程序的json，每个页面也是有的单独的json的，

小程序中的每个页面，可以使用 .json文件来对本页面的窗口外观进行配置，当页面的配置和全局的配置冲突时，页面的配置项会覆盖app.json的window中配置项。

好的，现在我们对小程序有的基础了认识了，可以完成一个项目了