AppID
安装html
开发者工具使用前端
说明:第一次使用工具须要使用注册小程序的微信
扫码登陆git
建立小程序项目:github
编译
菜单,运行QuickStart
项目(模拟器中展现的欢迎页)演示:打开已存在的项目,以及认识开发者工具web
pages/ ---------------- 页面(组件),全部页面都应该放到这个目录中
index/ ------------- index文件夹
index.js ---------- index页面的逻辑代码
index.wxml -------- index页面的HTML结构
index.wxss -------- index页面的CSS样式
index.json -------- 页面配置(可选)
utils/ ---------------- 公共工具(函数)
app.js ---------------- 逻辑
app.json -------------- 全局配置(包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等)
app.wxss -------------- 全局样式(CSS)
project.config.json --- 开发工具配置(例如ES6转ES五、界面颜色、编译配置等)
复制代码
pages
目录中app.json
中进行配置app.json
中配置pages
,能够快速建立页面app.json 配置说明:
1 全部的页面都须要配置到 `pages` 配置项中
2 `pages` 数组的第一项表示进入小程序要展现的页面
复制代码
<text></text> :用来展现文字内容,相似于 span
复制代码
配置 - app 和 pagejson
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等小程序
page.json 页面的.json 只能设置 window 相关的配置项,以决定本页面的窗口表现微信小程序
app.json
是全局配置api
[page].json
是针对当前页面的配置,若是页面中的配置与全局配置冲突,是以页面配置为准跨域
tabBar.list
的pagePath
页面不展现标签栏data
<text>{{ msg }}</text>
<input type="text" value="{{ msg }}">
<checkbox checked="{{isAgree}}"></checkbox>
复制代码
<view wx:if="{{ isLoading }}">
<text>数据加载中...</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else>
<text>搞定啦~</text>
</view>
<!-- 隐藏多个元素,不改变 wxml的层级结构 -->
<block wx:if="{{ isLoading }}">
<text>小明</text>
<text>小红</text>
</block>
复制代码
<view hidden="{{ isLoading }}">
<text>搞定啦~</text>
</view>
复制代码
wx:for
:遍历数组,在元素中经过index
获取索引号,经过item
获取当前项wx:for-index="idx"
:替换默认的 indexwx:for-item="it"
:替换默认的 itemwx:key
属性,来提升渲染性能<view wx:for="{{ list }}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName.id">
{{idx}}: {{itemName.message}}
</view>
复制代码
bindtap
2 catchtap
data-*
,实现给事件“传递”参数<button bindtap="sayHi" data-msg="test">
点我吧
</button>;
Page({
sayHi(event) {
console.log("单击事件触发了~", event.currentTarget.dataset.msg);
}
});
复制代码
setData()
:更新数据
this.setData({
name: "jack"
});
复制代码
<input value="{{ input }}" bindinput="inputChangeHandle" />;
Page({
inputChangeHandle: function(e) {
this.setData({ input: e.detail.value });
}
});
复制代码
rpx
的基本使用
@import
的基本使用任务中须要频繁处理的操做:
1 清除已完成任务按钮 的展现和隐藏
2 剩余任务(未完成任务)的展现和隐藏
复制代码
<!-- 小程序中的图片标签:相似于 web 中的img标签 -->
<image src="图片路径"></image>
<!-- 小程序中的图标,用于展现一个小图标 -->
<!-- type 表示当前 icon 的类型 -->
<icon class="checkbox" type="success"/>
复制代码
open-type
能跳转到的页面也不一样navigator
组件必须指定url
,不然会报错open-type
类型<navigator url="/pages/page1/page1">跳转页面page1</navigator>
<!-- 跳转页面,而且传递参数 -->
<navigator url="/pages/page1/page1?page=1&limit=10">跳转页面page1</navigator>
复制代码
rpx
代替原始的px
像素flex
布局,也能够配合百分比布局来使用mode
用来设置图片的展现模式pagePath
属性不能使用/
开头1 在实际的项目中须要在开发设置
中配置服务器域名
,而后,小程序才能发送请求获取数据
2 可是,在开发期间,能够忽略这一步
详情
菜单中,勾选最后一项:不校验安全域名、TLS版本以及HTTPS证书
3 在小程序不用考虑跨域的问题,由于小程序是基于微信这个客户端
4 没法在小程序中使用 XHR 对象,发送请求