微信小程序开篇作为一个移动端开发人员,对web端的js,css,xml基本上就是不懂.可是微信小程序就是用js+css

作为一个移动端开发人员,对web端的js,css,xml基本上就是不懂. 可是微信小程序就是用js+css(wxss)+xml(wxml)来开发,我需要不断的去想,js是干嘛的,wxss是干嘛的,wxml是干嘛的,好烦. 今天我就先介绍一些简单的困扰我的东西,内容非常的基础.

这里我们选择无AppID. 项目名最好和项目目录的文件名一致,当然不一致也OK,不过我觉得一致看起来舒服些. 最后再勾选上在当前目录总创建quick start项目.会帮你自动生成一个简易的教程. 点击添加项目.

添加完项目我们就能看到如下画面:

但是!如果你看到的只是一个空白的页面 -- 页面上没有圆形的头像和Hello World,只有个WeChat.那么该怎么办? : (

首先我们关闭该项目

然后点击右上角的设置代理,然后选择第一个不是用任何代理....,然后点击保存,再打开Sunday工程,应该就OK了.

我不清楚是不是因为我开着VPN的缘故,当时这个问题困扰了我一整天.

该项目在微信小程序官方也有很详细的解释,那么我就不去过多的解释每个文件夹以及文件的作用了.太啰嗦,我的习惯是直接改代码,看看会有什么变化.. 我们这次做一个界面的跳转,就是OC中的pushViewController这么一个小案例.

I. 我们在pages右边的三个点的按钮,新建一个目录名为work,然后点击work目录旁边的三个点按钮,依次创建.js,.json,.wxss,当然你也可以只创建一个wxml,因为wxml是用来显示视图的,不过,你运行的时候,会报错,不影响运行.建议都创建一下.

II. 我们先来配置一下app.json文件,所有的页面都需要在app.json里面添加,不然程序不知道有这个页面的存在. 这时点击保存,可能会报错,不过不用管,如果觉得不爽,那么可以直接先把第V步完成.

我们依葫芦画瓢,把pages后面的路径稍作修改即可,同时需要注意的是,第4行代码后面要加个逗号,不加也没关系,反正编译不通过,你还是要加的.

III. 我们先打开index.js文件,并且添加代码后如下图:

//js我没学过,我也没有去翻书求证..我只是在这里臆想,如果有误,还望指正,莫以我说的为准.
//事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
//这行是定义了一个名为`jumpToWork`的方法.
jumpToWork: function() {
//根据index.js给出的代码,我们能看出来,这个是导航栏跳转的API.具体的含义,可以查阅小程序的API解释.
    wx.navigateTo({
  //这个url就是页面的路径,依葫芦画瓢,我们也这样写.
      url: '../work/work',
//成功和失败后的回调,我想这个res应该是外界传过来的一个参数,具体是什么我也没有深究,不过可以通过调试,看到console面板上有输出jump success.
      success: function(res){
        // success
        console.log('jump success')
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },

我们再打开index.wxml文件,并添加代码后如下图:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto" bindtap="jumpToWork">{{motto}}</text>
  </view>
</view>

上面这段代码,我们给Hello Word这个文本添加了一个点击事件.这个bindtap是事件绑定的意思.OK,现在我们为Hello World绑定好事件,并且设置好了要执行的事件.

IV. 我们再打开work.js,然后添加一行代码page({})即可.不添加的话会报错,通过报错,我知道得加上 - -.

V. 我们再打开work.json文件,添加一行代码{},

VI.我们再打开work.wxml文件,添加如下代码:

//这就是给work页面写UI了.简单的一个hello Sunday.
<view>
    <text>hello Sunday</text>
</view>

OK,这样的话,基本就没什么问题了. 要记得所有的文件在修改之后一定要保存一下.然后运行一下.点击Hello World,有没有跳转成功呢?

微信小程序 开篇

微信小程序开篇