微信小程序最基本代码入门

微信小程序的简单实现

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

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

 <view class="words-view">
        <image class="star" src="../images/star.png"></image>
        <text class="words">萌宠日记:</text>
  </view>

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

小程序的步骤，第一步先创建新的代码格式，点击项目，新建项目。在选择APPID的时候，如果没有就选择无AppID

写好了之后，点确定就可以打开一个新的文件写小程序。
刚开始进去的时候，它有一个模板。写好了所有小程序可能会遇到的函数和代码，我们在刚开始的时候，可以先把这些全部删除。删除完了之后，再点击编译，它会提示你有错误，错误是因为js文件中还没有任何东西，所以我们需要给js中写入一些头文件之类的。pages（{}）。pages是小程序不可少的一个东西，在小程序中，每一层都非常明确。当我们刚刚开始学习的时候，可以先不删除那些自带的函数。它不会影响你的代码与程序执行。

这个时候，就开始编写我们的程序。小程序中有一个普通模板，pages在这个模板中，有一个index()，index中需要三个文件。.js , .wxml , .wxss. 这里边的后缀就相当于PHP中的HTML，CSS。其实在编写小程序的时候，就和PHP是差不多的，只不过小程序有很多的文件之类的内容，要包含在里边。
每一个小程序的代码中，还有一个必须的元素，app.js app.json app.wxss
这三个文件是每一个小程序都必须有的，在json 文件中，是设置小程序初始的界面，

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

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

<view>
   <view class="containet">
      <text class="containet-text">hello</text>
   </view>
</view>

运行结果为：

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

<view>
	  <view class="containet">
	    <image class="csdn-text1-1" src="../images/csdn-text1-1.jpg"></image>
	    <text class="containet-text">hello</text>
	  </view>
  </view>

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

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

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