安装
到
https://developers.weixin.qq.com/miniprogram/dev/framework/
下载微信开发者工具
到https://mp.weixin.qq.com/ 注册
开始打开小程序开发工具
进行如下步骤(一下仅供个人开发使用的是js)
然后进入之后左边各文件代表的意思
pages存放页面的文件夹
-index首页
-index.js首页的业务逻辑
-index.json首页的配置
-index.wxml首页的模板(对应的html)
-index.wxss首页的样式写法与css相同
-logs日志页面
utils工具
util.js工具js
eslintrc语法检测配置
app.js小程序入口js
app.json小程序配置
app.wxss小程序全局样式
project.config.json项目的配置
project.private.config.json个人项目配置
sitemap.json站点地图(告诉微信哪些页面可以被收录)
app.json里的一些数据
与平常html区别
1.标签名字有点不一样
从下边边的例子可以看到,小程序的 WXML 用的标签是 view, button, text 等等
<view class="container">
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{
{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{motto}}</text>
</view>
</view>
我的理解是view对应着div 而text对应span
2.多了一些 wx:if 这样的属性以及 {
{ }} 这样的表达式跟vue差不多如果学过vue那么这些应该也不难
模板
在template中写 想要传送数据的话现在主页定义数据然后在对应组件中写入data='{ {…数据}}"
定义模板
<template name="msgItem">
<view>
<text> {
{index}}: {
{msg}} </text>
<text> Time: {
{time}} </text>
</view>
</template>
使用模板
<template is="msgItem" data="{
{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
表单(与下方事件相结合查看)
<input value="{
{s1}}" bindinput="inputHd"/>
inputHd(e){
console.log(e);
var s1=e.detail.value;
this.setData({s1:s1})
},直接在page中写与data同级
setData setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。
✅ 仅在需要进行页面内容更新时调用 setData;
✅ 对连续的 setData 调用尽可能的进行合并;
❌ 避免不必要的 setData;
❌ 避免以过高的频率持续调用 setData,例如毫秒级的倒计时;
❌ 避免在 onPageScroll 回调中每次都调用 setData
事件
事件的传参
<button data-msg="xxx" bindtap="tapHd">
获取事件的参数 e.target.dataset.msg
bindconfirm表单输入确认
bindtap点击时候
bindinput 键盘输入时触发,event.detail = {value, cursor, keyCode},
//bindfocus输入框聚焦时触发,类似的还有很多 inputHd即触发的事件在js中写即可
页面切换
假如在文档中直接使用
<navigateTo>组件跳转..
api跳转
wx.navigateTo跳转
wx.switchTab切换底部栏
wx.redirect重定向
wx.reLaunch重启
在下一页中可以使用<navigator open-type="navigateBack" >返回</navigator>返回
而redirect使用完左上角会出现一个回到主页的按钮
底部菜单tabBar
全局的在App.json中配置格式如下
"tabBar": {
"color": "#777",
"selectedColor": "#1cb9ce",
"list":