最简单上手微信小程序_代码007(未授权)

本文介绍: 高效入门微信小程序！做个备忘录！！

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

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

微信开发者工具就是开发小程序的IDE，当然也可以用VsCo de，看个人习惯，新手用开发者工具没毛病。进入下面网页按电脑配置下载相应安装包就行啦。
开发者工具下载
在这里插入图片描述
 我们打开微信开发者工具

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

三剑客：

在pages 目录下新建文件夹，命名为 demo
在这里插入图片描述
 demo文件夹下新建页，命名也是demo，回车

 直接自动生成 js、json、w xml和wx ss 四个基本文件，方便得不行！

有个更绝的方法，进入 app.json，在pages里加入一个页面的地址，直接生成改名称的文件夹并包含四个基本文件。
在这里插入图片描述
将pages/demo/demo往上移到第一位，再按一下编译，发现小程序一开始进入的页面就变成了我们新建的demo页，因为我们还没加代码，所以只显示了一条默认的地址，下面开搞！

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

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

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

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

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

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

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

isCreated : true

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

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

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

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

<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>

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;
}

    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
        })    
    },