小程序开发备忘

Posted redjk

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序开发备忘相关的知识，希望对你有一定的参考价值。

相关资料

小程序简易教程
框架介绍
组件介绍
Api

PART1 构成

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件必需作用
app.js是小程序逻辑(配置第一次打开时, 崩溃,后台切换时需要做的逻辑处理)
app.json是小程序公共配置 (小程序有哪些页面page, 窗口的背景/颜色, 超时设置等)
app.wxss否小程序公共样式表
具体每个页面page是由由四个文件组成，分别是：
文件类型必需作用
js是页面逻辑
wxml是页面结构
json否页面配置
wxss否页面样式表

比如整个小程序所有的page的路径信息需要配置到app.json中,举例如下:
{
  "pages": [ 
    "pages/login/login",
    "pages/index/index",
    "pages/order/order",
    "pages/solution/solution",
    "pages/personal/personal",
    "pages/navigation/navigation",
    "pages/solutionChart/solutionChart"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}
"pages" #用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

├── app.js #整个小程序的通用配置(配置第一次打开时, 崩溃,后台切换时需要做的逻辑处理)
├── app.json #小程序公共配置 (小程序有哪些页面page, 窗口的背景/颜色, 超时设置等)
├── app.wxss #小程序整体通用公共样式表
├── pages #小程序具体的各个子页面目录
│   │── index  #一个小程序page对应以下4个文件组成
│   │   ├── index.wxml  #相当于web的html页面
│   │   ├── index.js #控制页面的逻辑
│   │   ├── index.json #配置本页面的标题,背景等
│   │   └── index.wxss #页面的个性化样式
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils #用户自定义用于存放工具类

└── images #用户自定义存放图片路径


则需要在 app.json 中写

{
  "pages":[
    "pages/index/index",//这里对应的就是pages/index/index.wxml页面
    "pages/logs/logs"
  ]
}

"window" #定义小程序所有页面的顶部背景颜色，文字颜色定义等

PART2 逻辑层和视图层

以数据绑定的程序为例
index目录就是一个具体的页面, 下面有js,wxml,wxss等文件用来描述index.wxml这个页面
app.json中的pages配置了index这个页面
{
  "pages":[
    "index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
打开index.wxml页面
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

其中<view> 和<button>等分别是小程序提供的视图组件和表单组件, 可以理解为html中的标签
可直接使用并配置相关参数(事件,大小等属性), 并由小程序渲染.

index.js 代码如下
// pages/index/index.js
Page({

/**
* 页面的初始数据
*/
data: {
array: [\'当天\', \'本月\', \'近三月\',\'近半年\',\'本年\'],
index: 0,
date: \'2016-09-01\',
time: \'12:01\',
barItem: [
{
name: \'利润汇总\',
image: \'../../images/menu1_unfocus.png\',
selectedImage: \'../../images/menu1_focus.png\',
selected: false,
color: \'#666666\',
url: \'/pages/solution/solution\'
},
{
name: \'每日营业情况\',
image: \'../../images/menu3_unfocus.png\',
selectedImage: \'../../images/menu3_focus.png\',
selected: true,
color:\'#FF0000\',
url: \'/pages/index/index\'
},
{
name: \'运营支出\',
image: \'../../images/menu2_unfocus.png\',
selectedImage: \'../../images/menu2_focus.png\',
selected: false,
color: \'#666666\',
url: \'/pages/order/order\'
},
// {
// name: \'\',
// image: \'../../images/menu4_unfocus.png\',
// selectedImage: \'../../images/menu4_focus.png\',
// selected: false,
// url: \'/pages/personal/personal\'
// },
],
successresponseData: [],
datalist:[]
},

//更新日期选型,刷新取值
bindPickerChange: function (e) {

var that = this;
console.log(\'picker发送选择改变，携带值为\', e.detail.value)
this.setData({
index: e.detail.value
})
wx.request({
url: require(\'../../config\').getnumUrl,
//url: \'http://localhost:8081/framework-protal/main/gas/getsale\',
method: \'POST\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},

data: {
gasid: wx.getStorageSync(\'gasid\'),
type: e.detail.value
},
success: function (res) {
console.log(\'success\')
console.log(res.data)
that.setData({
numresponseData: res.data.response,
})
},
fail: function (res) {
console.log(\'fail\')
}

})
wx.request({
url: require(\'../../config\').getsaleUrl,
//url: \'http://localhost:8081/framework-protal/main/gas/getsale\',
method: \'POST\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},
data: { gasid: wx.getStorageSync(\'gasid\') },
success: function (res) {
console.log(\'success\')
console.log(res.data)
that.setData({
responseData: res.data.response,
})
var gasnameArr = wx.getStorageSync(\'gasname\');
var gasname;
if (gasnameArr.length != 0 && gasnameArr != undefined) {
gasname = gasnameArr.join(",");
if (gasname.length > 10) {
gasname = gasname.substring(0, 10) + "...";
}
}
that.setData({
gasname: gasname,
gasnameArr: wx.getStorageSync(\'gasname\'),
})
},
fail: function (res) {
console.log(\'fail\')
}

})




},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that =this;
var gasnameArr = wx.getStorageSync(\'gasname\');
var gasname;
if (gasnameArr.length != 0 && gasnameArr != undefined) {
gasname = gasnameArr.join(",");
if (gasname.length > 10) {
gasname = gasname.substring(0, 10) + "...";
}
}
that.setData({
gasname: gasname,
gasnameArr: wx.getStorageSync(\'gasname\')
})
/*wx.request({
url: require(\'../../config\').getsaleUrl,
//url: \'http://localhost:8081/framework-protal/main/gas/getsale\',
method: \'POST\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},

data: { gasid: wx.getStorageSync(\'gasid\') },
success: function (res) {
console.log(\'success\')
console.log(res.data)
that.setData({
responseData: res.data.response,
})
},
fail: function (res) {
console.log(\'fail\')
}

}) */



wx.request({
url: require(\'../../config\').getnumUrl,
//url: \'http://localhost:8081/framework-protal/main/gas/getsale\',
method: \'POST\',
header: {
\'content-type\': \'application/x-www-form-urlencoded\'
},

data: {
gasid: wx.getStorageSync(\'gasid\'),
type:0 //默认值为当天
},
success: function (res) {
console.log(\'success\')
console.log(res.data)
that.setData({
numresponseData: res.data.response,
})
},
fail: function (res) {
console.log(\'fail\')
}

})


},
//加油站点击事件
bindButtonTap: function (e) {
wx.redirectTo({
url: \'/pages/personal/personal?userid=\' + wx.getStorageSync(\'userid\') + \'&type=1\',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},

/**
* 菜单单击
*/
onBarItemClick: function (e) {
let url = this.data.barItem[e.currentTarget.dataset.sno].url;
if (url == null || url == \'\') {
return;
}
wx.redirectTo({
url: url
})
},
/**
* 导航栏单击
*/
onNavigation: function () {
wx.navigateTo({
url: \'/pages/navigation/navigation\'
})
},

onHotPro2: function(e) {
wx.navigateTo({
url: \'/pages/groupLine/groupLine?id=\' + e.currentTarget.id,
})
},

onHotPro3: function(e) {


wx.login({ //调用微信登录接口
success: function (res) {
wx.setStorageSync("code", res.code)
let code = wx.getStorageSync("code")
//
wx.request({
url: \'http://172.16.16.145:8180/wxService/wx/queryProductDetail\',
method: \'GET\',

data: {
id: 3,
},
success: function (res) {
console.log(\'success\')
console.log(res)
},
fail: function (res) {
console.log(\'fail\')
}
});
},
fail: function () {

}
});





wx.navigateTo({
url: \'/pages/flowPay/flowPay\',
})
},

onCase1: function(e) {

wx.navigateTo({
url: \'/pages/case/case?id=\' + e.currentTarget.id,
})
},
//输入搜索内容
searchmessage: function (e) {
this.setData({
searchmessage: e.detail.value
})
},
//点击搜索
onsearch: function (e) {

wx.navigateTo({
url: \'/pages/order/order?productName=\' + this.data.searchmessage,
})
},
//点击注册
regist: function (e) {
wx.navigateTo({
url: \'/pages/login/reg/reg\',
})
}
})