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

微信小程序的简单实现

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

小程序和小游戏是在开发工具中实现的,就像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是小程序不可少的一个东西,在小程序中,每一层都非常明确。当我们刚刚开始学习的时候,可以先不删除那些自带的函数。它不会影响你的代码与程序执行。
.js 文件中,需要有Page({})名,如果没有就会出错,这个的意思就相当于是包含文件的头文件,在后边写的程序,要在.js  文件中保存名称,而且在这个里边调用。
这个时候,就开始编写我们的程序。小程序中有一个普通模板,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>中写的。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值