小程序demo1

       小生不才，前来分享小程序的学习过程，如若有先生看出不足，还请多多指教。

       今天做的第一个案例是小程序的登陆页面。如图：

登陆页面

---

      首先打开我们的微信web开发工具：

开发工具登陆页面

---

       选择目录，填写ID和项目名称。ID的话自己去申请就好，当然前期没有也无所谓，点击小程序就可以不用ID登陆。然后进入我们的开发工具初始页面：

初始页面

---

       有些时候开发工具会默认配置一些文件，咱们手动把他删除就好了。进入初始页面之后尼，咱们开始创建包。如图：

---

       images是用来存放图片的，因为小程序开发工具找不到其他目录下的图片，所以只能在demo1里面创建一个专门用来存放图面的文件夹。

       pages和test是用来存放代码的。一般是新建一个pages文件夹，然后再在pages新建一个test文件。当然这里的名字都是随意取的啦。test里面放的是一个页面的代码a.wxml  a.wxss  a.js。大家都是过来人，我也不在这里介绍这三种类型了吧。当然，一个小程序是不可能只有一个页面的，所以我们还可以在pages下面继续创建test1文件，test2文件等……

      接下来是重点，我们看到在pages下面有app.js  app.json app.wxml  app.wxss四个文件。为什么要说是重点呢？首先，这里的名称不能改，必须是app.js  app.json app.wxml  app.wxss。其次，这里面的数据，属性不能随便改。因为这四个文件关系到整个小程序的运行状况，一个小小的问题都有可能导致小程序的崩溃。所以对于咱们新手而言能不动则不动。

      好，接下来开始写第一页的代码：

代码

这里的view和web里面的div类似，text元素和p元素类似，这里不做多解释。接下来是设置样式，样式的设置和web也很相似，样式可以直接在元素后面添加，也可以在wsxx后面添加，寸缕个人喜欢简洁一点，所以样式同意设置在wxss里面，如图：

wxss

        咳咳，我这个写得也不是很美观，希望大家讲究着看。

        过来人都知道，我们在写web的时候，要将css里面的样式引入html里面的用link来实现。那小程序里面是不是也需要外部链接呢？答案是不需要。我们可以回过头看看我在test下面的三个文件都是a，只是后缀不一样，着样有什么用呢？这就要说一说我们小程序的启动。

app.json

   app.json。小程序的的启动入口。需要加载的页面都需要在此挂载。如：

"pages": [

    "pages/test/a"

  ]

这就是在告诉程序要去查找pages目录下的test目录下的a文件。这就解释了为什么我们取名时取相同的道理。在小程序里面，一个目录下相同名称的js和wxss默认为wxml的外部链接，所以在取名和创建文件的时候我们一定要严格准守要求。

 "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#f0ffff",

    "navigationBarTitleText": "寸缕的小程序",

    "navigationBarTextStyle": "black"

  }

这一段代码是对小程序默认导航栏的修饰，如果不加这段代码会显示什么呢？

导航栏

---