景德镇做网站公司,网页广告,济宁网站开发,wordpress 网站底部美化项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面#xff0c;每个页面包含四个文档.json为配置文件.wxml 为模板文件#xff0c;相当于HTML模板.wxss 为样式文件#xff0c;相当于HTML的CSS样式表…
项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面每个页面包含四个文档.json为配置文件.wxml 为模板文件相当于HTML模板.wxss 为样式文件相当于HTML的CSS样式表.js 为JS 脚本逻辑文件相当于HTML的js脚本utils一个共用程序逻辑库公共的js函数文件通过module.exports的方式暴露pages下的每个页面使用不需要每个页面编写重复的Js代码。app.js必填小程序逻辑app.json必填小程序公共配置app.wxss选填小程序公共样式表project.config.json项目配置文件或称为项目IDE配置文件在“微信开发者工具”上做的任何配置都会写入到这个文件绝对路径和相对路径“/”表示根目录 …表示返回上一级 区别相对路径习惯用“…/”表示上一级 尺寸 rpx 换算1px 1rpx 要求设计搞宽高满足750X1334 ipone6 px与rpx的区别rpx可以自适应。让元素宽高根据不同屏幕自适应px是固定大小的尺寸元素偏移量view classparentviewhello/viewview classchild/view
/view
.parent{display:inline-flex; /* 自适应宽度 */width:90rpx;padding:10rpx; /* 解决子元素偏移量超出不显示问题让子元素正常显示 */
}
.child{position:relative;top:-10rpx;left:6rpx
}字体egfont-family:“PingFangSC-Thin” 设置平方细体 只在ios上有效 消除字体上下间距eg:font-size:24rpx;line-height:24rpx; 数据来源wxml js——wxml 服务器——js——wxml 数据绑定 “{{}}”插值 属性中同样使用“{{}}” 组件中存储数据有两个地方properties存储其他外部引用的数据data里存储组件中单独使用的数据三元表达式{{key? ‘yes’:‘no’}}。在双大括号“{{}}”中使用 生命周期函数 onLoad:function(options){ } //监听页面加载 onReady:function(){ } //监听页面初次渲染完成 onShow:function(){ } //监听页面显示 onHide:function(){ } //监听页面隐藏 onUnload:function(){ } //监听页面卸载组件性的封装性、开放性、粒度小组件灵活、大组件放方便 封装性data里存储组件封装的数据供组件内部使用 开放性properties存储组件开放的数据供其他外部使用 粒度组件功能的封装开放性 properties详解 properties下的属性对象形式 三个属性eg:like:{typeString //类型必须value: //初始值observer:function(){}
}view classlike-box bindtaponLikeimage src{{islike?isimg:notimg}} classlike-img/imagetext classlike-text{{count}}/text
/view //开放属性为了可以从外部设置的属性
properties: {islike: { // javascript对象属性type(属性类型必填)、value(初始默认值)、observertype: Boolean,value: false,observer:function(){...}},count: {type: Number,value: 9}
},
//封闭属性内部属性
data:{isLike:true,yesImg:/images/yes.png,noImg:/images/no.png
}
//粒度
methods: {onLike:function(event){let islike this.properties.islikelet count this.properties.countcount islike ? count - 1 : count 1this.setData({count: count,islike: !islike})}}组件事件应用
访问properties中的属性this.properties.islike
methods: {onLike:function(event){ //自定义事件let islike this.properties.islike //访问properties中的属性let count this.properties.countcount islike ? count - 1 : count 1this.setData({count: count,islike: !islike})}}js中取data、properties中的数据this.data.数据属性 this.properties.数据属性
js中改变data、properties中的数据
data:{like:false
}
this.setData({like:!this.data.like
})TOC
url服务器接口地址必须data请求的参数header请求的头部method请求方式POST(请求数据)、GET提交数据、PUT更新数据…success成功的回调参数fail失败的回调参数一般的失败不包括返回失败状态吗之类的错误而是网络错误等错误HTTP状态码 200 请求成功 201 创建成功 202 更新成功 204 删除成功 301 永久重定向 400 请求包含不支持的参数 401 未授权 403 被禁止访问 404 请求的资源不存在 413 上传的file文件体积过大 500 服务器错误wx:request二次封装wx.request(object)发起网络http请求
属性参数
url: //开发者服务器接口地址
data: //请求的参数
header: //设置请求的 headerheader 中不能设置 Referer。content-type 默认为 application/json
method: //HTTP 请求方法(GET\POST\PUt\DELETE\HEAD\OPTIONS\TRACT\CONNECT)
dataType : //返回的数据格式(JSON\其他)
responseType: //响应的数据类型
success: //接口调用成功的回调函数
fail : //接口调用失败的回调函数
complete : //接口调用结束的回调函数调用成功、失败都会执行
wx.request({url: , data:,header:,method:,dataType:,success:
})a) 根目录下的config.js做一些常量配置 b) http.js请求方法写请求方法并引用常量配置文件 c) module配置页面请求方法接口模型 d) 页面导入实例化使用
// config.js
const config {api_base_url: http://bl.7yue.pro/v1/,appkey: AbhC31IG7ruCDp57,
}export { config }// http.js
import {config} from ../config.jsconst tips {// 自定义错误码提示1: 抱歉出现了一个错误,1005:appkey无效请前往www.7yue.pro申请,3000:期刊不存在
}class HTTP{request(params){// url, data, method,if(!params.method){params.methodGET}wx.request({url:config.api_base_url params.url,method:params.method,data:params.data,header:{content-type:application/json,appkey:config.appkey},success:(res){// 获取http状态码let code res.statusCode.toString()if (code.startsWith(2)){//请求回调函数把请求结果通过success回调函数传递回去params.success params.success(res.data)}else{// 服务器异常调用let error_code res.data.error_codethis._show_error(error_code)}},fail:(err){this._show_error(1)}})}// 服务器异常方法_show_error(error_code){if(!error_code){error_code 1}const tip tips[error_code]wx.showToast({title: tip?tip:tips[1], icon:none,duration:2000}) }
}export {HTTP}// module/classic.js
import { HTTP } from ../utils/http.js
// 继承
class Classic extends HTTP {getLatest(sCallback) {this.request({url: classic/latest,method: GET,success: (res) {sCallback(res)}})}
}
export { Classic }// index.js
import { Classic } from ../../models/classic.js
let classicModel new Classic()data: {classicData:null,},onLoad: function (options) {classicModel.getLatest((res){console.log(res)this.setData({classicData:res})})},export与importexport导出模块 import导入模块 注意事项1import导入的名字必须与export的一样2使用 as重命名 全局使用app.jsApp({// 全局数据对象globalData: {isIphoneX: false,isIos: false,screenHeight: 667,screenWidth: 375,windowHeight: 667,windowWidth: 375,rpx: 0.5,user_id: ,open_id: ,},// 应用程序启动时触发一次onLaunch() {//获取系统信息,获取手机型号//screenWidth 、screenHeight屏幕宽、高//windowWidth 、windowHeight 可使用窗口宽、高//windowWidth 、windowHeight 可使用窗口宽、高// model型号// platform (客户端平台)var that this;wx.getSystemInfo({success(res){that.globalData.screenHeight res.screenHeight;that.globalData.screenWidth res.screenWidth;that.globalData.windowHeight res.windowHeight;that.globalData.windowWidth res.windowWidth;that.globalData.rpx Number((res.windowWidth / 750).toFixed(4));if (res.model.search(iPhone X) ! -1) {that.globalData.isIphoneX true}if (res.platform ios) {that.globalData.isIos true;}}});},// 全局方法具体的把一些后面页面操作公共数据的公共方法写在这里onHide() {this.data.webShowed false},setOpenId(open_id) {this.globalData.open_id open_id;},getOpenId() {return this.globalData.open_id;},setUserId(user_id) {this.globalData.user_id user_id;},getUserId() {return this.globalData.user_id;}
});组件的定义与使用定义 a) 组件存储目录components b) 新建组件新建目录——新建component c) 组件名字两级名字不需要都一样可以目录外层命名页面都定义为index 使用 a) 定义 组件存储目录components 新建组件新建目录——新建component 组件名字两级名字不需要都一样可以目录外层命名页面都定义为index b) 引用和使用 组件定义完没有任何突出只需要在page页面中引用就可以使用了 引用首先在要引用组件的页面的.json里找到“usingComponents”属性把要引用的组件通过对象键值对配置好就好组件引用要使用绝对路径/斜杠表示根目录“key”:“components/like/index”key为自定义组件名为了容易看出是组件推荐v-开头eg: “v-like” 使用 c) 从外部设置组件propeties中的属性值 把数据从页面js绑定到页面中的组件上 d) 自定义事件的激活与监听 组件上bind:islike“onLike” js激活islike事件this.triggerEvent(‘islike’,{behavior: behavior },{})第一个参数是自定义事件名称第二个是传递的参数第三个… 页面自定义事件监听onLike(e){console.log(e.detail.behavior)} 从中就能取到事件传递的参数
!--components/like/index.wxml--
view classlike-box bindtaponLikeimage src{{islike?isimg:notimg}} classlike-img/imagetext classlike-text{{count}}/text
/view
// components/like/index.js
Component({properties: {islike:{type:Boolean,value:false},count:{type:Number,value:9}},data: {isimg:/images/shouye/islike.png,notimg:/images/shouye/notlike.png},methods: {onLike:function(event){//自定义事件let islike this.properties.islikelet count this.properties.countcount islike?count-1:count1this.setData({count:count,islike:!islike})//激活一个事件 this.triggerEventlet behavior this.properties.islike?islike:notlikethis.triggerEvent(islike,{behavior: behavior},{})}}
})// index.json
{usingComponents:{v-like:/components/like/index,}
}// index.wxml使用组件
v-like like{{classicData.like_status}} count{{classicData.fav_nums}} bind:islikeonLike /// index.js onLike:function(event){let behaviorevent.detail.behaviorlet id this.data.classicData.idlet types this.data.classicData.typelikeModel.like(behavior, id,types)},// module/like.js
import { HTTP } from ../utils/http.js
class Like extends HTTP {like(behavior,artId,category){let url behavior islike ? like :like/cancelconsole.log(behavior, artId, category)this.request({url:url,method:POST,data:{index:artId,type:category}})}
}
export {Like}组件图片的使用: 建议放在comonents下的images里 初始化授权button open-typegetUserInfo bindgetuserinfogoBegin开始/buttongoBegin: function (e) {console.log(e)if (e.detail.errMsg getUserInfo:ok) {// 授权成功提交用户信息到后台重定向到首页}},
