最近简单的入门了微信小程序开发,遂写一篇博客记录下学习过程
首先在自己的公众号找到小程序的入口
里面会有详细的api内容和开发文档介绍
在申请appid后,我们可以选择用自己本来的idea或者微信推荐的微信开发工具进行编码
贴个官方下载链接:戳我
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载安装完成后,主界面是这个样子(如果提示xxx文件写入失败,原因是你c盘空间满了,它安装时会在c盘建立临时文件)
填入你的appid后,即可开始你的第一个小程序开发
简单说明一下微信开发工具需要注意的地方:
1.小程序的框架与html语言结构类似,图中的index.js用来写js文件,wxml类似于html文件,wxss则和style文件类似
2.小程序整体布局与html极度相似,并不需要再去学习
3.小程序的脚本语言并不能作为组件的事件回调
详细介绍请参考官方文档:戳我
https://developers.weixin.qq.com/miniprogram/dev/framework/
简单的代码实例
WXML
<!--index.wxml-->
<view class="container">
<view class="header">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<button class="weui-btn" type="default">{{array[index]}}</button>
</picker>
</view>
<view class="nav">
<text>标题1</text>
</view>
</view>
WXSS
.header{
position: absolute;
top: 0px;
}
JS
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
array: ['炉石传说', '英雄联盟', 'APEX', '怪物猎人'],
objectArray: [
{id:0,
name:'炉石传说'
},
{id:1,
name:'英雄联盟'
},
{id:2,
name:'APEX'
},
{id:3,
name:'怪物猎人'}
],
index: 0
},
bindPickerChange: function (e) {
this.setData({
index: e.detail.value
})
}
})
运行效果:
关于小程序的介绍就先到这,下一篇会讲讲如何用flask部署在服务器上,然后在小程序上拿到数据