小生不才,前来分享小程序的学习过程,如若有先生看出不足,还请多多指教。
今天做的第一个案例是小程序的登陆页面。如图:
首先打开我们的微信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里面,如图:
咳咳,我这个写得也不是很美观,希望大家讲究着看。
过来人都知道,我们在写web的时候,要将css里面的样式引入html里面的用link来实现。那小程序里面是不是也需要外部链接呢?答案是不需要。我们可以回过头看看我在test下面的三个文件都是a,只是后缀不一样,着样有什么用呢?这就要说一说我们小程序的启动。
app.json。小程序的的启动入口。需要加载的页面都需要在此挂载。如:
"pages": [
"pages/test/a"
]
这就是在告诉程序要去查找pages目录下的test目录下的a文件。这就解释了为什么我们取名时取相同的道理。在小程序里面,一个目录下相同名称的js和wxss默认为wxml的外部链接,所以在取名和创建文件的时候我们一定要严格准守要求。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f0ffff",
"navigationBarTitleText": "寸缕的小程序",
"navigationBarTextStyle": "black"
}
这一段代码是对小程序默认导航栏的修饰,如果不加这段代码会显示什么呢?