微信小程序的简单实现

1.小程序是最近十分受欢迎的一项创新，因其简单方便，不需要大内存下载。随进随用。所以小程序和小游戏的用户日益剧增。小程序之所以如此受欢迎，是因为它符合现代人的生活，不用巨大的安装包，不需要占用手机的内存，而且不需要很多的流量下载。所以，学会小程序和小游戏是十分有必要的，今天先来实现简单的界面。

2.小程序和小游戏是在开发工具中实现的，就像C语言，c++，Java等的语言一样，都有自己独立的编译软件。我使用的是“微信web开发者工具”。我们从第一步开始，一步一步实现小程序的简单界面。先下载微信web开发者工具，然后安装。打开之后，注册登录。接下来就是进入界面实现简单的程序。首先要知道小程序的基本格式，

viewclass="words-view"imageclass="star"src="../images/star.png"/imagetextclass="words"萌宠日记:/text/view

3.view/view为小程序的基本格式，里边写的是代码。image/image是带入照片的格式，格式和PHP中的一样，就是在最后地址的时候要写详细地址。text/text是文本框。

4.小程序的步骤，第一步先创建新的代码格式，点击项目，新建项目。在选择APPID的时候，如果没有就选择无AppID写好了之后，点确定就可以打开一个新的文件写小程序。刚开始进去的时候，它有一个模板。写好了所有小程序可能会遇到的函数和代码，我们在刚开始的时候，可以先把这些全部删除。删除完了之后，再点击编译，它会提示你有错误，错误是因为js文件中还没有任何东西，所以我们需要给js中写入一些头文件之类的。pages（{}）。pages是小程序不可少的一个东西，在小程序中，每一层都非常明确。当我们刚刚开始学习的时候，可以先不删除那些自带的函数。它不会影响你的代码与程序执行。这个时候，就开始编写我们的程序。小程序中有一个普通模板，pages在这个模板中，有一个index()，index中需要三个文件。.js,.wxml,.wxss.这里边的后缀就相当于PHP中的HTML，CSS。其实在编写小程序的时候，就和PHP是差不多的，只不过小程序有很多的文件之类的内容，要包含在里边。每一个小程序的代码中，还有一个必须的元素，app.jsapp.jsonapp.wxss这三个文件是每一个小程序都必须有的，在json文件中，是设置小程序初始的界面，

{"pages":["pages/index/index"每一个需要用到的文件，都要在这边写入它的头文件名称。],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}

5..wxml是写页面的程序。写程序的时候，前后一定要对应。比如后边必须得跟,后边必须跟，否则系统就会报错。为了方便查看和修改代码，每一个文件中都尽量直接写独一无二的名字，这样读者在预览的时候，看起来也方便。比如我们现在在index.wxml中写一段代码

viewviewclass="containet"textclass="containet-text"hello/text/view/view

6.运行结果为：这个是基本的文本框。我们还可以加入图片，图片可以是本地图片也可以是网络图片。现在先以本地图片举例：在引用图片的时候，要先创建一个文件images存放图片。我们创建完了文件之后，需要先在系统文件中找到images所在的位置并存放要使用的文件。注意，它是先存放文件再调用的。代码：

viewviewclass="containet"imageclass="csdn-text1-1"src="../images/csdn-text1-1.jpg"/imagetextclass="containet-text"hello/text/view/view

7.wxss中的代码是同PHP中CSS一样的功能，都是用来控制图片的规格的。而区别是wxss的语句稍微有些不一样。在wxss中，度数的单位是rpx,而且宽可以设置为百分比的形式。

.csdn-text1-1{width:100%;height:500rpx}

8.这样简单明了的代码虽然全部存放在不同的文件中，但是因为其和PHP类似，都是同等类型的语言转换，所以理解之后，就比较好掌握。这是文本和图片的简单操作，我们还可以设置更高一点的规格，比如可以图片位置的摆放，排列顺序，这里就需要用到布局的一个全新的知识，flexflex是专门设置框架的。它的主要功能在于更好的适应尺寸。flex的相关知识可以在网上自行查阅。我们需要记住，所有的代码都是在view/view中写的。