小程序demo的示例分析

小编给大家分享一下小程序demo的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在峄城等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站制作、成都网站设计 网站设计制作按需定制设计,公司网站建设,企业网站建设,高端网站设计,全网整合营销推广,外贸网站制作,峄城网站建设费用合理。

github

mycloudnote客户端
mycloudnote服务器

注意:由于我并没申请取得appid,所以我无法获得用户的微信账号id,我里面用的是用户微信的昵称作为数据库的主键,所以用重名的话可能户出bug,另外由于没有appid,所以所有并没有试过真机测试……

截图

小程序demo的示例分析

小程序demo的示例分析

小程序demo的示例分析

小程序demo的示例分析

关于小程序的个人感悟

这玩意就是html+css+js,如果你熟悉前端那么上手就真的是太快了………………
小程序每个页面由4个文件组成,分别是 .wxml .json .js .wxss

小程序demo的示例分析

  • wxml文件和html很像,也是一种类xml的语言,应该说wxml就是为了小程序而改编的html,去掉一些html标签添加一些新标签,懂html的话十分简单掌握,看官方api就行,下面是demo中的一个wxml页面代码…………

    
    
    题目
    
    
    
    正文
    
    
    添加
    
    

    对应以下页面

小程序demo的示例分析

  • wxss文件是小程序版的css,也是很简单,看官方文档就行~就像这样(和上面的wxml结合):

    /*addNote.wxss*/
    .log-list {
    display: flex;
    flex-direction: column;
    padding: 40rpx;
    }
    .submit
    {
    padding: 20rpx;
    }
    .hide
    {
    display: none;
    }
    .label
    {
    margin-left: 20px;
    }
  • js文件就是平时的javascript,用于处理业务逻辑和数据,不同的是这里面都是调用一些小程序内置的方法,而且几乎所有的业务逻辑处理都写在一个叫Page()的方法里,具体参照官方文档~

//addNote.js
var app = getApp()
Page({
  data: {
    title:'',
    context:'',
    noteID:'',
  }
  ,
  save: function(e)
  {
    app.getUserInfo(function(userInfo){
      wx.request({
      url: 'http://139.199.74.155/myCloudNote/addNote.php',
      data: {
        userid:userInfo.nickName,
        title:e.detail.value.title,
        context:e.detail.value.context
      },
      header: {'content-type':'application/x-www-form-urlencoded'},
      method: 'POST', 
      success: function(res){
        wx.redirectTo({
          url:'../list/list'
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  })
  },
  onLoad: function(options)
  {

  }
})
  • json文件是用来配置页面的一些属性如页面名称等,并不是用于存储数据的(存储数据操作在js文件中操作)…………

//addNote.json
{
    "navigationBarTitleText": "编辑笔记"
}

以上是“小程序demo的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻名称:小程序demo的示例分析
浏览路径:http://scyanting.com/article/gcojsp.html