最简单上手微信小程序

引言

微信小程序的开发跟普通前端网页开发很像很像，都有三剑客（html、css、JavaScript），但小程序也有一些它的特点。如果之前有了一些前端的基础，那小程序上手会非常快，如果没有，也没关系，下面会从零开始教你搭建一个简单实用的备忘录小程序。奔着一个目标结果去学习，才是最高效的学习方法。
如果想了解提前了解一下html和css欢迎康康我的文章哦 高效入门html5 ，高效入门css3 。
如果想快速体验效果，app.json、wxml、wxss、js 文件的源码下面已经给出，粘贴进小程序就可以。

以下所有内容基于 小程序官方文档 和个人开发经验。
 

第一步

申请一个小程序账号！

小程序账号注册 ，在这个网页注册好自己的账号后，进入 小程序后台 ，查看并记录自己的AppID，有了这个你的小程序才能上线！在这里你可以管理你的小程序的权限，如查看数据报表，发布小程序等。

下载并打开微信开发者工具

微信开发者工具就是开发小程序的IDE，当然也可以用VsCode，看个人习惯，新手用开发者工具没毛病。 进入下面网页按电脑配置下载相应安装包就行啦。
开发者工具下载

我们打开微信开发者工具

起一个项目名，选一个目录，不使用云服务，模板选JavaScript-基础模板，ok！
 

第二步

小程序基本文件介绍

• app.js：全局入口文件，onLaunch()里放初始化的内容。（我们不需要动这里）
• app.json：全局配置文件。（里面不能有注释）（单独页面的.json文件的配置项会覆盖 app.json 中相同的配置项）

三剑客：

• wxml：可以理解为就是微信的html哈哈哈，跟html是一个逻辑，是整个小程序的框架文件，比如当前页面显示什么内容，按什么结构框架去显示等等。
• wxss：可以理解为就是小程序的css文件，是整个小程序的样式文件，就是渲染，让页面看起来更美观，比如设置页面的内容颜色，字体大小等等。
• js：如果一个app一打开只显示页面而没有任何交互功能，跟报纸没有区别。js文件是开发的核心，与前端的js文件一样，跑的是JavaScript代码，是小程序的逻辑文件，负责整个小程序的逻辑功能，比如按一下某个地方就响应上面功能，这些都在js文件里定义。

第三步

页面创建

在pages目录下新建文件夹，命名为demo

demo文件夹下新建页，命名也是demo，回车

直接自动生成 js、json、wxml和wxss 四个基本文件，方便得不行！

有个更绝的方法，进入app.json，在pages里加入一个页面的地址，直接生成改名称的文件夹并包含四个基本文件。

将pages/demo/demo往上移到第一位，再按一下编译，发现小程序一开始进入的页面就变成了我们新建的demo页，因为我们还没加代码，所以只显示了一条默认的地址，下面开搞！

app.json配置

我们可以看到app.json里面的window代码如下

把它改为

"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#f60",
"navigationBarTitleText": "第一个小程序",
"navigationBarTextStyle": "white"

编译，发现上方显示栏变了，#f60是橙色

wxml文件配置

打开demo.wxml文件，会发现只有一条<text>pages/demo/demo.wxml</text>, 我们会发现页面中的确也只显示pages/demo/demo.wxml，试一下改动一下<view>…</view> 里面的内容，小程序页面就会显示相应内容。
实际上html文件，或wxml文件，由一个个标签< ></ >组成，标签之间的就是内容，标签决定了整个页面的框架。标签的种类非常多，只能在一步步学习中积累。放内容的标签可以理解为容器，wxml里分块状容器<view> 和条状容器<text>。
要想使用逻辑，可以直接在标签里加两个双引号，如<text>{{ 10 + 20 }}</text>，页面会直接算出30.

<text>{{ 10 + 20 }}</text>  <!-- 注释-->

js文件配置

data: {
    mytext:"hhh",
    datalist:["111","222","333"]
},  /*注释*/

data中放的就是初始化的数据，试一下放上上面的数据，在wxml中：
<view>{{ mytext }}</view> , 则 “hhh” 会被拿到并打印出来，所以双括号里还能放变量。

试一下在wxml跑下面的代码：

<view wx:for="{{datalist}}"> 
    {{item}}--{{index}}
</view>

结果如下，它能把data中定义的datalist数组中所有数据打印出（动态数组遍历），我们的备忘录需要用到这个功能！

wxss文件配置

每个标签都可以定义一个class，如

<view class="hello"> hello </view>

这时这个hello就可以在css文件里定义样式！
打开wxss，

.hello{
    color:red;                         /*字体红色*/
	font-size:50px;                    /*字体大小为30像素*/
	background-color:lightblue;        /*背景为天蓝色*/
	text-align:center;                 /*居中显示*/
    }

发现hello变成了

也可以直接对view进行定义，这样所以的view标签都会被统一定义，class就会更灵活一点。

view{
    color:red;                         /*字体红色*/
	font-size:50px;                    /*字体大小为30像素*/
	background-color:lightblue;        /*背景为天蓝色*/
	text-align:center;                 /*居中显示*/
    }

注意！定义class的样式需要前面加个小数点 . ，直接对标签操作则不需要。
 

第四步

条件渲染 介绍

其实不是所有的逻辑都必须在js中定义，简单的条件判断，如 if else， 可以在wxml中定义。
先在js文件的data中加入

isCreated : true

然后在wxml中，加入

<view wx:if="{{isCreated}}">条件渲染if</view>
<view wx:else>条件渲染else</view>

编译，会发现 条件渲染if 被打印出，如果data中把 isCreated 改成 false，则 条件渲染else 被打印出，这就是条件渲染，选择性地显示内容。
 

事件 介绍

就是按一下按键后触发的功能，我们叫为触发事件。我们先来创建一个按键，在wxml使用<button>标签：

<button type="primary" bindtap="handleTap">click</button>

type定义按键的大小，primary是正常，mini是迷你。bindtap=“handleTap” 把按键绑定到了一个叫 handleTap 触发事件，这个事件需要到js文件定义。

在js中，接着data，新建一个函数 handleTap

 handleTap(){
        console.log("click")
    },

点一下编译，按一下按键，发现终端打印出了click！点一下就打印一下，说明我们的事件触发功能成功！
进阶一下，如果想要按一下就改变前面定义的mytext和isCreated变量，怎么办？easy：

 handleTap(){
        console.log("click"),
        this.setData({
            mytext:"xiaoming",
            isCreated:!this.data.isCreated  //取反
        })
    },

需要注意，小程序里改变量的值必须得这么搞，直接mytext：。。。会报错。
 

第五步

我们所需的基础知识已经介绍完啦，下面正式做备忘录！

页面框架

先把你的wxml代码删掉，把下面这段代码粘贴进你的wxml里，编译，先看看结果，再解释

<view class="box">
    <input type="text" bindinput="handleInput" value="{{mytext}}"/>
    <button bindtap="handleAdd">add</button>
</view>

<view wx:if="{{datalist.length>0}}">
    <view wx:for="{{datalist}}" wx:key="index" class="list"> 
        <text>{{item}}</text>
        <button size="mini" bindtap="handleDelete" data-myid="{{index}}">delete</button>
    </view>
</view>

<view wx:else>空空如也</view>

结果应该长这样，add按键左边是输入框，因为还没有css定义它的长度和边框，所以看不见。从代码可以看出总共就三个大的view标签，其实功能上只有两个，下面两个组成一个条件渲染块。

第一个view标签里面包了一个<input> 标签（格式定义为输入文本，绑定了一个input的事件，命名为 handleInput，就是输入框内容一旦变化就会触发，最后的value是定义初始化时输入框的内容）和一个<button> 标签（绑定了一个按键触发事件，命名为 handleAdd）。
下面的一大坨view里面看着很复杂，其实easy啦。先条件判断一下datalist中有无数据，如果有数据（有备忘事件），就进入里面的view。

我们看到一个前面介绍过的 for 循环遍历datalist，并把里面每个数据都标上key，就是wx:key=“index” 这句代码，方便之后对单独地数据进行操作（删除），当然为了在css中定义它的样式让它更好看点，给它定义一个class。

再往里看，就是遍历出的每个数据，先以text标签装着数据，再在它后面跟上一个delete按键，在按键中，绑定了一个按键事件 handleDelete ，data-myid=”{{index}} 用于给每个按键都带上一个id，跟前面让数据带上key是一样的道理，为了区别出每一个按键。

若datalist里面没数据，就会在页面显示“空空如也” 哈哈哈 <view wx:else>空空如也</view> 应该很容易理解

页面美化

同上，把wxss里面代码删掉，将下面的代码粘贴进去。

input{
    border:1px solid black;
    height:50px;
    /*line-height: 50px;*/
    border-radius: 10px;
}

.box{
    display: flex;
    flex-direction: row;
}

.list{
    display: flex;
    flex-direction: row;
}


.list text{
    width: 150px;
}

加了wxss渲染页面后，整个页面看起来就符合标准了。代码其实大家看着应该就能懂，我再啰嗦几句。

input标签，border定义它的边框，厚1px（px是像素的意思，就是1个像素的厚度），height就是输入框的高度，border–radius定义了边框的圆角。

输入框加add按键我们希望它们并排在第一行，所以对它们整体所定义的box类就可以，flex–direction: row; 就是让他们排成一行，以flex为单位会自动拉伸，很方便。

对list类的定义同理啦。

当然各位也可以再加上点颜色或调一下大小。

逻辑设计

整个页面有了，下面加入灵魂！JavaScript。
将下面代码的粘贴进去js的Page里，注意，三个事件函数跟在data的后面，整体在Page里面，别把Page删了…

    data: {
        mytext:"",
        datalist:["111","222","333"]
    },

    handleInput(evt){
        //console.log("input",evt.detail.value),
        this.setData({
            mytext:evt.detail.value
        })

    },

    handleAdd(){
        console.log(this.data.mytext),
        this.setData({
            datalist:[...this.data.datalist,this.data.mytext],
            mytext:""
        })
    },

    handleDelete(evt){
        console.log("delete",evt.target.dataset.myid),

        this.data.datalist.splice(evt.target.dataset.myid, 1)
        this.setData({
            datalist:this.data.datalist
        })    
    },

编译一下康康，整个备忘录搞定啦！将备忘事件输入输入框，按add，事件会被添加进入，然后按delete会删除对应的事件。

handleInput函数：定义为只要输入框内容变化，就把当时的值存进mytext变量，所以一顿操作后，mytext存储最后确定的备忘事件，然后等着add函数把它取出来。（evt是调用的参数，可以理解为当前页面）

handleAdd函数：先用console.log把mytext的值打印出来看一看对不对，然后我们用到前面介绍的改变量的值方法，setData，将mytext的值（备忘事件）加入datalist数组里，但人家数组里面正常还有别的数据呀，怎么在后面加进去呢？[…this.data.datalist,this.data.mytext]， 前面那三个点很重要，就是说不管datalist前面有多少值，我只在它后面插入一个mytext，同时将mytext变量清空，等待下一个备忘事件输入。
所以一按下add键，datalist就会多一个数据，所以wxml中循环遍历数组时就会多生成一个view标签和delete按键，在页面实时显示出来。（页面一直处于刷新状态，不是按下了按键才刷新）

handleDelete函数：先将按下的delete键对应的id打印出来康康。下面来个高端操作，将数组中对应id的值删掉，同时后面的值往前移一位，一行代码搞定，this.data.datalist.splice(evt.target.dataset.myid, 1)， 再将这个变化了的datalist保存，ok！

END

至此，这个备忘录讲完啦，这是作为小程序入门比较高效的小项目，如果想快速体验效果，app.json、wxml、wxss、js 文件的源码上面已经给出，粘贴进去就可以。
其实小程序的开发已经有很多很多的模板，比如商场、点餐等，改改数据就行，官方的开放文档也很全，但还是要多动手。
之后可能会出更多有趣项目的教学，如果想看其他计算机和电子的学习内容欢迎来我主页逛逛呀哈哈。

代码007普通

打赏 收藏 海报 链接