Zerlinda's Blog

小程序入门学习

小程序的使用很类似于现在流行的一些MVVM框架,在学习小程序前最好了解一下一些相关框架的使用,这样学习起来才更加得心应手效率更高,下面是我在学习小程序过程中进行的一些学习心得。更加具体的开发文档及本地调试方法具体请参考官方文档小程序官方文档

文件结构

小程序包含一个描述整体程序的app公共配置文件和多个描述各自页面的page文件。

主体部分配置:包括三个文件组成:app.js, app.json, app.wxss,必须放在项目的根目录下,小程序的主要配置都在里面。

页面文件:每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件(相对于css),.wxml后缀的文件是页面结构文件(相对于html)。

注意:即使各个page页面的.json不需要任何配置,最好还是在文件中加入{}一个空的大括号避免出错。

演示目录结构:

1

 

 

小程序的主体配置

app.js        

页面逻辑,包含小程序的生命周期函数和全局变量。

App() 函数用来注册一个小程序。接受一个object 参数,指定小程序的生命周期函数等。

另外,在其他页面的page文件中,全局getApp() 函数,可以在页面的任何地方获取到小程序实例从而获取或者修改全局变量。

app.js

2

 

purchase.js

3

 

注意:

App() 必须在 app.js 中注册,且不能注册多个

不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

4

不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。

通过 getApp() 获取实例之后,不要私自调用生命周期函数(不包括自己定义的函数)

app.json            

小程序公共设置(标题,各种组件样式),设置路由及页面路径,设置顶部或底部tabbar。

5

Tabbar中配置的list页面在点击的时候会自动跳转到对应的路径页面。不需要自己再进行其他任何配置。

 

小程序的页面文件

一个小程序页面由四个文件组成,分别是:

.js     .wxml   .wxss      .json         

注意:为了方便开发者减少配置项,规定这四个文件名必须相同且在相同的路径下

*.js

与app.js类似,Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。定义在其中的事件处理函数以及自定义属性都是可以通过this访问到的。

另外,小程序的事件绑定貌似是不能直接在函数中传递参数,只能在对应的view中绑定自定义属性data-*(data-value),然后通过event对象的 event.currentTarget.dataset(.value)对象中获取。当然自定义属性绑定的可以是obj对象。

6

 

 

小程序的页面跳转

1、使用wx.navigateTo接口跳转,原页面保留。

wx.navigateTo({
    //目的页面地址
    url: "page/login/login",
    success: function(res){},
})

2、使用wx.redirectTo接口跳转,关闭原页面,不能返回。

wx.redirectTo({
    //目的页面地址
    url: "page/login/login",
    success: function(res){},
})

3、使用组件

    <navigator login="" page="" url=" url: ">跳转</navigator>

当该组件添加redirect属性时,等同于wx.redirectTo接口;默认redirect属性为false,等同于wx.navigateTo接口。

4、用户点击左上角返回按钮,或调用wx.navigateBack接口返回上一页。

    wx.navigateBack({
        delta: 1
    })

delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁。

 

 

页面跳转传值及实例

url?key=value&key1=value1直接在url中传递参数

如循环输出某一段html,每次点击跳转url带参数

7

8

在跳转的页面中直接调用:

9

注意:

wx.navigateTo wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面。

注意url的路径问题,url中的路径是相对于当前文件的相对路径!

 

模块化

你可以定义一些公共的方法,然后使用模块化导入,小程序模块化跟es6的模块化异曲同工,注意因为exports的特殊性,请使用module.exports暴露接口。

1

2

其实在小程序的使用过程中会发现其许多不完善的地方,最痛苦的事情莫过于尽管你知道错误可能出在在哪里,但是你只能默默等待什么时候小程序能够自己修复相关的bug。

发表评论

电子邮件地址不会被公开。 必填项已用*标注