微信小程序代码讲解

开发微信小程序时，小程序代码必不可少。有时候一个代码错误会导致你的小程序开发失败。小编认为有必要向大家解释一下微信小程序代码，希望对大家有所帮助。

先看门户app.js，在app(obj)注册一个小程序。接受一个对象参数，指定小程序的生命周期函数等。其他文件可以通过全局方法getapp获取app实例，然后直接调用其属性或方法，如(getapp.globaldata)

？

//app.js

app({

onlaunch:函数{

//调用api从本地缓存获取小程序数据

var logs=wx . getstorageync(' logs ')| |[]

logs.unshift(date.now)

wx . setstoragesync(' log '，log)

},

getuserinfo:function(cb){

变量=这个

if(this.globaldata.userinfo){

type of cb==' function ' cb(this . global data . user info)

}else{

//调用登录界面

wx.login({

成功：功能{

wx.getuserinfo({

成功：功能(res) {

that . global data . user info=res . user info

type of cb==' function ' cb(that . global data . user info)

}

})

}

})

}

},

globaldata:{

userinfo:null

}

})

我理解app.js是条目初始化文件，也是提供全局api扩展的地方。下面的分析带有几个方法和属性

一旦小程序初始化，onlunk钩子函数就会自动执行，如果你在小程序生命周期中没有主动调用onlunk，它就不会被执行。

varlogs=wx。getstoragesync ('logs') | | []获取本地缓存中的logs属性。如果该值为空，则设置log=[]类似于html5中的localstorage。

当前登录时间被添加到数组中

wx . setstorageync(' log '，log)将数据存储在本地缓存中，因为wx是全局对象，所以可以在其他文件中直接调用wx . getstorageync(' log ')来获取本地缓存数据。

getuserinfo函数顾名思义就是获取登录用户信息，相当于这个函数提供了一个获取用户信息的接口，其他页面不调用就不执行。其他页面通过getapp . getuser info(function(user info){ console . log(user info)；})以这种方式调用这个方法获取用户信息。

？

getuserinfo : function(cb){//参数为cb，类型为applet函数调用

变量=这个

如果(这个。global data . user info){//用户信息不为空

cb==' function' cb的类型(这个。数据。user info)//如果参数cb的类型是函数，则执行cb获取用户信息；

}else{//如果用户信息为空，也就是说第一次调用getuserinfo会调用用户登录界面。

wx.login({

成功：功能{

wx.getuserinfo({

成功：功能(res) {

console.log(res)

用户信息=res.userinfo//assign将用户信息发送到全局数据。如果再次调用getuserinfo函数，则不需要调用登录界面。

cb的类型==' function ' cb(that . global data . user info)//如果参数cb类型是函数，执行cb获取用户信息

}

})

}

})

}

}

globaldata对象用于存储全局数据，并在其他地方调用

然后简单分析一下app.json文件，用来全局配置微信小程序，确定页面文件路径，窗口展现，设置网络超时，设置多个标签等。

比较重要的是pages属性，这是必需的，是一个数组。数组中的元素是字符串文件路径，指定小程序由哪些页面组成。第一项必须是小程序的初始页面。

？

{

第' :页[

页面/索引/索引'，'页面/日志/日志'

],

window':{

背景textstyle':'light '，navigation barbakgroundcolor ' : ' # fff '，navigationbartitletext': '微信'，navigationbartextstyle ' : '黑色'

}

}

然后查看项目索引和日志文件夹。微信小程序的初始项目中，每个页面相关的js、wxss、wxml都放在自己的文件中，这样结构看起来就清晰多了。

让我们看看索引文件夹，它是小程序的初始页面。在索引文件夹下，有三个小文件：index.js、index.wxml和index.wxss小程序将js、css和html代码分开，放在它们自己的文件中。js和样式表的文件名必须与当前文件夹的wxml文件名一致，以保证js和样式表的效果能够在页面上显示。我很欣赏这种设计理念，统一，职责明确，降低了代码设计的复杂度。

index.wxml，这是一个常用的模板文件，是数据驱动的。那些开发过前端mvc和mvvm项目的人会对此很熟悉。毕竟这是建立在反应上的。

？

//查看容器

//bindtap为容器绑定click和touch事件，当touch离开时触发bindviewtap事件处理函数，通过设置index.jspage添加bindviewtap

//花括号中的变量来自index.js的数据对象，实时解析为对应的值

{{userinfo.nickname}}

{ {座右铭}}

index.js的用法和reaact差不多。注册页面。接受一个对象参数，它指定了初始数据、生命周期函数、事件处理函数等。页面的。

？

var app=getapp //获取门户文件应用的应用实例

页面({

数据： {

motto: 'hello world '，userinfo: {}

},

//自定义事件处理功能。。userinfo轻松触发此功能

bindviewtap:函数{

wx.navigateto({//全局对象wx的跳转页方法)

url: './log/log '

})

},

onload:函数{//加载页面时自动触发此生命周期函数。

console.log('onload ')

变量=这个

//调用应用实例的方法获取全局数据

app . getuser info(function(user info){

//更新数据并自动呈现页面

that.setdata({

userinfo:userinfo

})

})

}

})

文件index.wxss只呈现当前页面，覆盖全局app.wxss的相同样式

然后分析logs log文件夹，里面包含logs.wxml、logs.js、logs.wxss、logs.json，保证渲染效果同名。

logs.wxml文件

？

//块容器函数，没有其他实际意义。wx:for函数：遍历logs数组，遍历多少次就复制多少次。for-item相当于

遍历元素给出变量名，方便参考。

{ {索引1}}。{{log}}

logs.js文件

？

//log . js

varutil=require('././utils/util.js')//util.js相当于一个函数库。我们可以在这个文件中定制、扩展和封装一些常用的函数和方法

页面({

数据： {

logs: []

},

onload:函数{

this.setdata({

logs :(wx . getstoragesync(' logs ')| |[])。map(function(log){//通过wx.getstoragesync获取本地缓存的日志数据

returnutil.formattime(新日期(日志))//日期格式

})

})

}

})

logs.json文件

？

{

navigationbartitletext': '查看启动日志'/当前页面配置文件，在当前页面窗口顶部设置导航栏标题，以及其他相关内容

}

基本的页面结构和逻辑就这么简单，没有什么莫名其妙的东西暴露在我们面前。

下面是题目的开头。微信小程序如何实现获取手机号？标题到此结束

小程序可以连接到电话通讯录。这个功能让很多用户觉得极其有用，可以比较快捷方便的联系到通讯录中的好友。微信小程序获取的电话号码怎么设置？让我们互相了解一下。

微信小程序获取手机号码教程：

要获取微信用户绑定的手机号，首先要调用登录界面。

因为用户需要主动触发来发起获取手机号的界面，所以这个功能不是通过applet api调用，而是通过组件来触发。

注意：目前界面针对非个人开发者，认证小程序是开放的。应该慎用。如果用户举报较多或被发现在不必要的小程序场景中使用，微信有权长期收回小程序的界面权限。

使用方法

需要放

开放式组件的值被设置为getphonenumber。用户同意后，微信服务器返回的加密数据可以通过bindgetphonenumber事件的回调获得，然后第三方服务器可以用session_key和app_id解密，获得手机号码。

小程序打开手机号快速填写组件，完成认证后即可使用非个人开发者的小程序。具体步骤如下：

在新用户注册、联系人信息注册等必要场景下，开发者可以在页面上部署手机号码快速填充组件。

用户组件完成弹出授*后，可以直接填写微信绑定的手机号。大多数情况下，不需要验证短信验证码。

如果用户不愿意提供微信绑定的手机号，开发者应该提供手动输入手机号的功能。

键盘编码器。wxml布局文件代码

手机型号：{{mobilemodel}}手机像素比：{ { mobileepixelratio } }窗口宽度：{{windowwidth}}窗口高度：{{windowheight}}微信设置语言：{{language}}微信版本号：{{version}}

来自代码的代码片段_file_0.txt。js逻辑文件代码

相信大家对微信小程序获取的手机号都有具体的了解。如果还是什么都不懂，可以在文末留言，或者在源代理网络的小程序通道上搜索相关信息。