微信小程序的index.js怎么写？详细代码见下方↓

微信小程序实例index.js代码如下：

可以搜索小程序名称： 快递最后一公里

实例index.js代码

var app = getApp()

Page({

/**

* 页面的初始数据

*/

data: {

//三张图片轮播

imgUrls: [

{

imageUrl: '/images/weicha/timg1.jpg',

},

{

imageUrl: '/images/weicha/timg2.jpg',

},

{

imageUrl: '/images/weicha/timg3.jpg',

}

],

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 800,

},

onSwiperTab: function (e) {

/*var postId = e.target.dataset.postId

wx.navigateTo({

url: postId,

})*/

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

app.loginWinCha(this.initPageData)

},

//初始化登录才能查看的数据

initPageData: function () {

this.setData({

componentList: [

{

id: 1,

url: '../weicha/express/courier/index',

imageUrl: '/images/weicha/timg1_1.jpg',

title: '快递小哥(送快递)',

queryType: 'courier'

},

{

id: 2,

url: '../weicha/express/seller/index',

imageUrl: '/images/weicha/timg1_2.jpg',

title: '合作商家(代收快递)',

queryType: 'seller'

},

{

id: 3,

url: '../weicha/express/personal/index',

imageUrl: '/images/weicha/timg1_3.jpg',

title: '收件人(签收快递)'

},

{

id: 4,

url: '../weicha/express/logistics/index',

imageUrl: '/images/weicha/timg1_4.jpg',

title: '快递物流查询'

}

]

})

},

onItemClick: function (e) {

var targetUrl = e.currentTarget.dataset.pay

var targetQueryType = e.currentTarget.dataset.index

if (targetQueryType == "seller") {

var reqData = {

seller_openId: app.globalData.openid,

status: '2'

}

this.queryDBUtil("sellerInfo", reqData, targetQueryType, targetUrl,

"亲，您暂未申请商家,请提交商家申请！")

} else if (targetQueryType == "courier") {

var reqData = {

courier_openId: app.globalData.openid,

status: '2'

}

this.queryDBUtil("courierInfo", reqData, targetQueryType, targetUrl,

"亲，您暂未申请快递员,请提交快递员申请！")

} else {

wx.navigateTo({

url: targetUrl

})

}

},

queryDBUtil: function (reqCollectionName, reqData,queryType, retUrl,retMgs){

wx.cloud.callFunction({

name: "utilsDB",

data: {

collectionName: reqCollectionName,

collectionWhere: reqData

},

complete: res =>{

let retStatus = '1'

if (res.result.data.length >= 1) {

retStatus = res.result.data[0].status

}

if (retStatus == '2') {

if (queryType == "seller"){

app.globalData.seller = res.result.data[0]

} else if (queryType == "courier"){

app.globalData.courier = res.result.data[0]

}

wx.navigateTo({

url: retUrl

})

} else {

wx.showToast({

icon: 'none',

title: retMgs

})

}

},

fail: err =>{

wx.showToast({

icon: 'none',

title: retMgs

})

}

})

}

})

微信小程序自带的API中的页面交互功能，虽然提示功能非常全面，但是所有的交互API中是没有可以自己在提示框中输入文本的功能，那么现在我们来自己做这样的一个提示框（可以带有输入功能），在提示框输入完内容之后，点击确定，可以将文本内容返回，点击取消则可以回到之前的状态。

（在这里，主页面的布局可以根据每个人的想法来布局，这里展示的css之后展示提示框部分的）

1、首先打开微信开发者工具，建立一个代码模板，那么我们这个提示框就是写在这个页面上。

    这里我们主页面叫做index

2、在基本页面中写上一个姓名的文本，当前姓名用<text>{{stuName}}</text>表示，然后为一个button按钮，再在js文件中，建立相应的点击事件以及stuName的信息。这样，一个原始页面就写好了。

下面我们开始d出框页面的制作

<view class='toast-box' hidden='{{!ifName}}'>

<view class='toastbg'></view>

<view class='showToast'>

<view class='toast-title'>

<text>修改姓名</text>

</view>

<view class='toast-main'>

<view class='toast-input'>

<input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>

</view>

</view>

<view class='toast-button'>

<view class='button1'>

<button catchtap='cancel'>取消</button>

</view>

<view class='button2'>

<button catchtap='confirm'>确定</button>

</view>

</view>

</view>

</view>

3、我们可以发现，点击按钮后d出输入框，如果点击除取消和确定之外的地方，是不会有反应的。为了做到这个功能，我们用一个绝对位置的渲染层（toastbg），覆盖住整个页面，并且如果你的页面长度没有滚动的话，请输入min—height：100vh，如果页面发生滚动，请把长度控制在height：100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明，opacity：0.2，即可

4、bindinput为写文本时所触发的事件，data-name为文本数据所保存的地方，在js中我们可以把这个数据打印出来，会发现我们所输入的文本信息。

以下为css的代码

.toast-box {

width: 100%

height: 100%

opacity: 1

position: fixed

top: 0px

left: 0px

}

.toastbg {

opacity: 0.2

background-color: black

position: absolute

width: 100%

min-height: 100vh

}

.showToast {

position: absolute

opacity: 1

width: 70%

margin-left: 15%

margin-top: 40%

}

.toast-title {

padding-left: 5%

background-color: #2196f3

color: white

padding-top: 2vh

padding-bottom: 2vh

border-top-right-radius: 16rpx

border-top-left-radius: 16rpx

}

.toast-main {

padding-top: 2vh

padding-bottom: 2vh

background-color: white

text-align: center

}

.toast-input {

margin-left: 5%

margin-right: 5%

border: 1px solid #ddd

padding-left: 2vh

padding-right: 2vh

padding-top: 1vh

padding-bottom: 1vh

}

.toast-button {

display: flex

}

.button1 {

width: 50%

}

.button2 {

width: 50%

}

.button1 button {

width: 100%

background-color: white

color: red

border-radius: 0px

border-bottom-left-radius: 16rpx

}

.button2 button{

width: 100%

background-color: white

color: black

border-radius: 0px

border-bottom-right-radius: 16rpx

}

.picker {

padding-top: 1vh

padding-bottom: 1vh

}

我们可以根据自己的喜欢，对提示框的样式进行改变

5、编写js代码，我们需要实现以下一些基本功能（点击出现d窗，取消不改变数据值，确定进行判断数据值，若为空则不能改变，否则可以改变，并且主页面上的内容要变为相应改变后的内容）

6、给最外层的d窗附上hidden（如图所示），为这个值初始为false，点击按钮后触发事件，改false为true，这样即可点击出现d窗。

7、为取消按钮附上点击事件，与hidden的部分刚好相反即可。

8、为书写文本绑定事件，上述代码中命名为setValue，这个函数我们传入一个event进去，将其打印，我们可以发现在其的detail中有我们刚刚所书写的内容，我们将这个值，传给js中data一个属性，这里我们命名为edit。

9、为确定绑定事件，用this.data.edit将这个值进行判断，若为空，我们用wx.showToast提示用户信息没有填写完整，并且页面不会改变。若不为空，则我们setData一下我们的stuName为这个edit的值，并且重新把hidden的属性值改为false。

10、返回到初始页面我们就可以看到我们自己做得一个提示框，并且具有修改值的功能

在MYSQL中新建一个test数据库，在里面新建一张type数据表，下面将从该表获得数据。数据表的数据如下：

2

/7

新建一个project小程序项目，用于讲解微信小程序如何获得数据库数据。

在project项目内，新建一个index模块来从数据库获得数据，并将数据输出在index.wxml页面。

4

/7

在index模块中index.js页面，在onLoad中使用wx.request方法向服务端文件请求数据。url为请求数据的地址；data为传输的参数，这里设置为空；method为传递参数的方式，header用于设置请求的数据类型，success是成功获得数据后的 *** 作，这里设置当成功获得数据后，把数据传递给index.wxml页面。

5

/7

在index.wxml页面，使用for循环遍历输出index.js传递过来的数据data，通过item将data数据输出在页面。

6

/7

在服务端新建一个api.php页面来接收微信小程序的数据请求，在api.php页面，使用mysqli连接数据库，通过query方法来执行sql语句从type数据表获得所有数据，再使用fetch_all方法获得数组数据，最后通过json_encode方法将获得的数组数据转换为json数据返回给微信小程序。代码如下：

7

/7

编译微信小程序，查看从数据表type获得数据内容，可见，成功从数据库读取数据并输出在页面上。

---