微信小程序_初开发

关于闽师通微信小程序开发

​ 这是第二次接触微信小程序了，之前在某个学期的暑假接触过，几乎全忘了。

​ 首先应该先下载一个微信小程序开发的软件，选择创建项目，要选择非云服务开发（这是我选择的，云服务的暂且看不懂）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C3yfBfLB-1604250817481)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201102005325694.png)]

​ 进去项目之后，会有这几个包显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W448arnI-1604250817483)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201102005400293.png)]

​ pages包是十分重要的，里面存放的就是我们的代码和页面，utils存放的是一些工具，而image是我存放的一些图片。pages文件夹里面就是我们

编写代码的地方，有

• xx.js ：类似与js文件，在里面写功能
• xx.json :可以在这里面配置小程序的信息，比如每个页面的标题
• xx.wxml ：类似html
• xx.wxss ：类似于css

​ 大体上和javaweb开发很像。在xx.wxml里面写页面，xx.wxss写css代码，xx.js写函数事件，基本上不会差很多，但是很多地方是需要百度的。记录一些信息

1、页面之间如何传递值

<input type="text" name="userName" placeholder="姓名" class="name" bindinput="userNameInput"/>
<input type="text" name="stuId" placeholder="学号" class="stuId" bindinput="stuIdInput"/>

bindinput="userNameInput"是监听输入框的输入的，需要在xx.js文件下面写赋值函数

userNameInput:function(e){
    this.setData({
      userName:e.detail.value
    })
  },

这个userName应该提前在data里面定义，此时这些值会被传递到js中的变量中，

Page({
  data: {
    userName:'',
    stuId:'',
    college:'',
    time:'',
    type:'',
    items: [
      {name: '出', value: '出'},
      {name: '进', value: '进'},
    ]
  },})

我们只需要利用这个函数就可以把数据传到main.wxml中，传值方法跟javaweb很像

  click:function (e){
    wx.navigateTo({   
      url: '/pages/main/main?userName=' + this.data.userName + '&stuId=' + this.data.stuId + '&college=' + this.data.college + '&type=' + this.data.type
     })
  },

在main页面中，需要在main.js接受这些值,

onLoad: function (option) {

    wx.setNavigationBarTitle({
      title: '闽南师范大学-疫情防控管理平台',
      
    })

     //调用时间
     // 调用函数时，传入new Date()参数，返回值是日期和时间
     var currenTime= util.formatTime(new Date());
     // 再通过setData更改Page()里面的data，动态更新页面的数据

    //从这里可以获取从第一个页面传来的值
    this.setData({
      userName: option.userName,
      stuId: option.stuId,
      college:option.college,
      time: currenTime,
      type: option.type
    });

  },

xx.wxml使用js的值很简便，只需要采用这种形式就可以把值取出来

 <text class="type">进出类型：{{type}}</text>
    <text class="time">扫描时间：{{time}}</text>

2、还是有几点需要我自己注意：Radio,图片无法自适应屏幕

• 首先关于radio的使用困扰了我很久，不细心看资料也让我吃了很大的亏,提前在js文件里面定义好数组

  Page({
    data: {
      items: [
        {name: '出', value: '出'},
        {name: '进', value: '进'},
      ]
    },
  

  然后在xx.wxml页面使用就行

   <radio-group class="radio" bindchange="typeInput">
      <label wx:for="{{items}}">
          <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
      </label>
  </radio-group>
  

• 虽然成功匹配了安卓机型，但是在ios身上出错了。反复修改代码却无法改变，最后发现我是将背景图片定义成了fixed形式，导致图片的overfloat📜是无法生效的，最后把

  position:fixed;
  改成
  position;relative
  成功解决