微信小程序学习笔记以及VUE比较

时间:2021-05-09 23:07:08

之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡。小程序我来了!(果然,一入前端深似海啊啊啊啊啊~)

编辑器:

Sublime Text;(官方提供的编辑器实在不敢恭维);

设置默认打开方式:.wxml——>html、.wxss——>css;

打开文件后点击右下角的Plain Text,在出现的文件格式中选择open all with current extension as… ->"需要显示的语法类型"。这样以后打开这个类型的文件就会自动进行语法高亮了。以后要继续用强大的Sublime Text。代码高亮;

(weapp-snippet:快速补全代码,直接下载好的代码片段放入Browse Packages/User 目录中重启即可。如何使用Sublime Text3开发微信小程序?



VUE和小程序对比学习:

VUEJS & 小程序组件 小区别

v-on:click="" bindtap=""

v-for= wx-for

{{items}}

==============

new Vue({

data:{
items:[],
},

==============

methods: {

    getInfo:function(){}

},

==============

mounted(){
this.items=[1,2,3]
}

})

.vue文件(包含html/css/js)

{{items}}

==============

Page({

data:{

    items:[],

},

==============

getInfo:function(){},

==============

onLoad:functon(){

    this.setData({

        items:[1,2,3]

    })

}

})

.js文件(拆分开名字相同的wx(ml/ss)

px/rem 1rpx=0.5px=1物理像素

引用: import common from '../../assets/js/commons.js'

引用:

@inport "common.wxss"

var common=requery("./common.wxs")

WXML 提供两种文件引用方式import和include。

文本

......

文本

富文本(支持编译html标签:b/h1/&np...)

进度条

开关选择器

底部弹出选这器(时间/日期/地区)

滑动选这器

导航

系统照相机

地图

音频

实时视频(直播)

实时音视频(直播-用户授权)

拍照

滑块/轮播

可移动

路由:router/index.js=====>app.json

小程序提供了丰富的微信原生API,调取手机设备本地资源和功能

API-小程序

微信小程序入门教程+案例demo

微信小程序开发初体验--教你开发小程序