小程序发展势头正足,有发展前景~
小程序的优势
什么是云开发
关于vscode开发环境高亮显示
基本目录文件
小练习,app.json
{ "pages":[ "pages/index/index", "pages/demo/demo", "pages/mine/mine", "pages/cart/cart", "pages/video/video", "pages/search/search" ], 底部翻页按钮及其对应的页面 "tabBar": { 按钮颜色 "color": "#333", 按钮选中颜色 "selectedColor": "#FF69B4", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icon/_home.png", "selectedIconPath": "icon/home.png" }, { "pagePath": "pages/search/search", "text": "搜索", "iconPath": "icon/_search.png", "selectedIconPath": "icon/search.png" }, { "pagePath": "pages/video/video", "text": "视频", "iconPath": "icon/_videocamera.png", "selectedIconPath": "icon/videocamera.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "icon/_img.png", "selectedIconPath": "icon/img.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "icon/_my.png", "selectedIconPath": "icon/my.png" } ] }, "window":{ "backgroundTextStyle":"light", 内容上方颜色 "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "首页", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
常用元素
view
独占一行,块级元素,类似html中的divtext
一行多个,块级元素,类似html中的p注意不能text不能嵌套view使用,其他具体用法参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
差值表达式,使用{{}}
渲染data中的数据,数据的基本类型(js数据类型,ES5及其之前的数据类型)
练习
// pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { date:"2021年4月24日16:30:20", // 数组,发现可以类型不同 arr :[1,2,3,'xiaosi'], // 字符串 myName:"xiaosi", // 对象数组 students:[ { name:'xiaosi1', age:'19', gender:'男' }, { name:'xiaosi2', age:'19', gender:'男' }, { name:'xiaosi3', age:'19', gender:'男' } ], // 对象 star:{ key1:"这是一个对象的属性值1", key2:"这是一个对象的属性值2", } }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
<!--pages/mine/mine.wxml--> <text>这是text标签内容1,类似html中的p,是行内元素</text> <text>这是text标签内容2,类似html中的p,是行内元素</text> <view> 这是view标签内容1,类似html中的div,是块级元素</view> <view> 这是view标签内容2,类似html中的div,是块级元素</view> <view>================================================</view> <view>差值表达式的基本用法:{{date}}</view> <view>=========下面演示基本数据类型的渲染============</view> <view>我的名字是:(字符串){{myName}}</view> <view>=============================================</view> <view wx:for="{{arr}}">这是数组的渲染{{index}},按照索引取值值为:{{arr[index]}}</view> <view wx:for="{{arr}}">这是数组的渲染{{index}},按照索引取值值为:{{item}}</view> <view>=============================================</view> <view>对象的数据渲染:{{star.key1}} === {{star.key2}}</view> <view>====================================</view> <view>对象数组的渲染:</view> <view wx:for="{{students}}"> <text>{{index}}==={{item.name}},</text> <text>{{item.age}},</text> <text>{{item.gender}}</text> </view>
隐式转换
wx:for循环遍历
wx:key
来指定当前循环的唯一标识,如果是简单的数据,就使用wx:key = “*this”