微信小程序开发者工具

文章资讯 2020-06-14 17:13:59

微信小程序开发者工具

微信小程序,小程序的一种,英文名WechatMiniProgram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
工具微信开发者工具
下载链接:htts:develoers.weixin.qq.comminirogramdevdevtosdownload.html
微信小程序账号
注册连接:htts:m.weixin.qq.comcgi-bingistermidage?action=index&am;lang=zh_CN&am;token=小程序优点即用即走
在微信界面就能使用所有的服务
不需要再安装一堆并非每天都会用到的应用
节省手机内存
它可以显示为一个单独的手机应用图标,访问很方便
开发成本低,你可以轻松地发布自己的程序。小程序页面
index.js:逻辑页面
index.json:配置页面
index.wxml:结构页面
index.wxss:样式页面wxml与wxss的语法和html与css基本一致
小程序单位
t:为逻辑分辨率,与屏幕尺寸有关,可以理解为长度单位;
x:为物理分辨率,与屏幕尺寸无关,用于描述像素点的多少;
i:每英寸包含的像素点小程序单位换算关系
ihone6下1x=1rx=0.5t(rx会在不同设备下转换、而x不会);
导航栏配置该文件为a.jsonages:配置页面路径
window:配置顶部导航栏
tabbar:配置底部导航栏事件绑定bindta和catchta:catch会阻止冒泡<buttonbindta="newFn">你点我啊<button>
<buttoncatchta="newFn">你点我啊<button>
<buttoncatch:ta="newFn">你点我啊<button>
dataset带参数<buttondata-me="3"catch:ta="newFn">你点我啊<button>
事件中布尔值模板引用
提高模板复用性;定义模板<temlatename="a">
<view>我自己创建的模板<view>
<temlate>引入模板Imort可以在该文件中使用目标文件定义的temlate<imortsrc="gestemlates.wxml">
<temlateis="a"><temlate>
include可以将目标文件除了temlate外的整个代码引入,相当于是拷贝到include位置<includesrc="gestemlates.wxml">网络请求
wx.quest({
url:'htt:localhost:8989getList',仅为示例,并非真实的接口地址
method:"ost",
success(s){请求成功后执行!!!
conse.log(s.data)
}
})练习——新闻列表获取新闻列表onLoad:function(otions){
wx.quest({
url:"htt:localhost:8989getData",
这里的this会受到ajax影响
success:s=>{
this.setData({
newsData:s.data
})
}
})
},
上拉加载onReachBottom:function(){
wx.quest({
url:"htt:localhost:8989getData",
这里的this会受到ajax影响
success:s=>{
s.data.forEach(=>{
this.data.newsData.ush()
})
this.setData({
newsData:this.data.newsData
})
}
})
},
新闻列表详细newsindex.wxml
<viewclass="myItem"wx:for="{{newsData}}"wx:key="key"bindta="ski"data-id="{{item.id}}">
...
<view>...newsindex.js
ski(dataId){
this.setData({
myId:dataId.curntTarget.dataset.id
})
wx.navigateTo({
url:`gesdetailindex?id=${this.data.myId}`
})
},...deatilindex.js
onLoad:function(otion){
conse.log(otion.id)
wx.quest({
url:`htt:localhost:8989getDetail${otion.id}`,
success:s=>{
this.setData({
detailData:s.data
})
}
})
},