>[success] # image -- 图片
1. [img](https://developers.weixin.qq.com/miniprogram/dev/component/image.html),用法基本可以完全看官方例子就行
2. `image`展示时候元素宽度和高度: **320x240**
3. `/`表示根目录
~~~
<image src="/assets/zznh.png" mode="aspectFit"/>
~~~
![](https://img.kancloud.cn/b8/75/b875d690625a9420b2b21696ab55257e_263x147.png)
4. 展示本地图片时候使用`wx.chooseMedia` api
~~~
<button bindtap="onChooseImage">选择图片</button>
<image class="img" src="{{chooseImageUrl}}" mode="widthFix"/>
~~~
* index.js
~~~
page({
onChooseImage() {
wx.chooseMedia({
mediaType: "image"
}).then(res => {
const imagePath = res.tempFiles[0].tempFilePath
this.setData({ chooseImageUrl: imagePath })
})
},
})
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架构模型
- 小程序配置文件
- app.js -- App函数
- 页面.js -- page
- 生命周期????
- 小程序 -- 页面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 样式wxss
- 小程序 -- 组件开发
- 小程序 -- 组件插槽
- 小程序 -- 组件的生命周期
- 组件总结
- 小程序 -- 混入
- 小程序基本组件
- text -- 文本
- view -- 视图容器
- button -- 按钮
- image -- 图片
- scroll-view -- 滚动容器
- input -- 双向绑定
- 通用属性
- 小程序常用Api
- 微信网络请求
- 微信小程序弹窗
- 微信小程序分享
- 获取设备信息 / 获取位置信息
- Storage存储
- 页面跳转
- 小程序登录