微信小程序入门代码简介

文件功能简介

新建一个云开发的小程序项目后，在资源管理器可以看到以下一些文件：

子文件简介

全局配置文件

在文件app.json中，设置小程序的各个界面的路径，在这里输入路径后，保存，会自动生成对应的文件。切记不要删除最后面的逗号，每输入一行，代码结束，在后面输入逗号。

"pages": [
    "pages/index/index",
    "pages/getOpenId/index",
    "pages/getMiniProgramCode/index",
    "pages/deployService/index",
    "pages/createCollection/index",
    "pages/uploadFile/index",
    "pages/selectRecord/index",
    "pages/updateRecord/index",
    "pages/updateRecordResult/index",
    "pages/updateRecordSuccess/index",
    "pages/sumRecord/index",
    "pages/sumRecordResult/index"
  ],

全局界面标题，标题的背景颜色，标题字体颜色等在下面代码中设置。

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },

底部导航栏的设置：tabBar控件，直接输入tab会有提示，然后选择tabBar，enter会自动补全代码。 导航栏最低设置2项，最多5项。 color：导航栏未选中字体颜色。#ccc是灰色，如下图中的“购物车”。 selectedcolor：导航栏中选中字体颜色。如下图中红色字体“首页”。 pagePath：选择该选项时需要展示的界面。 text：导航栏文本。 iconPath：未选中该导航栏时需要展示的图片。 selectedIconPath：选中该导航栏时需要展示的图片。 在添加tabBar控件时注意添加逗号。

"tabBar": {
    "color": "#ccc",
    "selectedColor": "#FF0000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    },  {
      "pagePath": "pages/shopcart/shopcart",
      "text": "购物车",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile-actived.png"
    }]
  },

小程序底部运行界面如下图：

页面文件

展示界面的文件在pages文件夹下，如pages/index文件夹。该文件夹下有四个文件，各个文件的用途

index.js：设置界面的响应函数，设置动态效果。 index.json index.wxml：界面需要展示的内容写在这个文件里。 index.wxss：设置页面的样式，如颜色字体大小、空间大小等。

下面介绍一些常用的功能： 显示输入文本：

<view>Hello world!</view>

插入图片：

<image src="{
         
  {img}}"></image>
<image src="/images/database.png"></image>

if-elif-else语句：

<view wx:if="{
         
  {true}}">NameA
</view>
<view wx:else> 请登录
</view>

For循环：这里需要加两个花括号表示变量的取值。{ {[1,2]}}表示包含元素1和2的列表，item为循环的元素，需要加两个花括号显示。

<view wx:for="{
         
  {[1,2]}}" wx:key="index">
  {
         
  {item}}
</view>

画Box，如下图。

在.wxml文件中通过view中的class属性对该控件设置样式，bindtap和catchtap属性可以设置点击该控件时的响应，bindtap控件不会阻止冒泡事件向上冒泡，catchtap控件可以阻止冒泡事件向上冒泡。点击灰色Box执行函数onTapBoxhandler，点击黄色Box执行函数onTapChildhandler。 在.wxss文件中可以通过引用class对控件设置样式。 在.js文件中，设置相应的响应，这里的console.log(“child”)为在控制台输出child。

/* pages/index/index.wxml 中的代码*/
<view class="box" bindtap="onTapBoxhandler">
<view class=child catchtap="onTapChildhandler"></view>
</view>

/* pages/index/index.wxss 中的代码*/
.box{
  width: 200rpx;
  height: 200rpx;
  background: #ccc;
}
.child{
  width: 50rpx;
  height: 50rpx;
  background: rgb(230, 230, 20);
}

/* pages/index/index.js 中的代码*/
onTapBoxhandler: function(){
  console.log("Box");
},
onTapChildhandler: function(){
  console.log("child");
},