微信小程序开发初体验

 上周被 小程序 刷了屏，吓得我周末赶紧撸了个 小程序 版的 知乎日报 压压惊, 总结一下这个开发体验，和踩过的坑。

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供网站设计制作、网站制作、网站策划、网页设计、空间域名、虚拟主机、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

 开发环境准备

小程序 出来第二天就被破解，第三天微信就把开发工具开发下载了， 现在只需要下载 微信开发者工具 就可以使用了，

 创建项目的时候，要选择无 appid, 这样就不会有 appid 的验证了。

目录结构

  • app.js 注册app逻辑， app.wxss 全局样式文件 app.json 配置信息
  • pages 存放页面文件
  • utils 工具类代码
  • images 图片资源文件

小程序中每一个页面都会有三个文件 .wxml .wxss .js ，对应着结构、样式、和逻辑，相当于网页中的 html css 和 js 的关系。

开发***个页面

代码来自新建项目

 
 
    
  
  
    2. 
  
  
    3. 
  
  
  3.   
    4. 
  
  
  4.     
    5. 
  
  
  5.     {{userInfo.nickName}}
    6. 
  
  
  6.   
    7. 
  
  
  7.   
    8. 
  
  
  8.     {{motto}}
    9. 
  
  
  9.   
    10. 
  
  
  10.  
    11. 
 
 
 
 
    
  
  
  1. /**index.wxss**/
    2. 
  
  
  2. .userinfo {
    3. 
  
  
  3.   display: flex;
    4. 
  
  
  4.   flex-direction: column;
    5. 
  
  
  5.   align-items: center;
    6. 
  
  
  6. }
    7. 
  
  
  7. 
  
  
  8. .userinfo-avatar {
    9. 
  
  
  9.   width: 128rpx;
    10. 
  
  
  10.   height: 128rpx;
    11. 
  
  
  11.   margin: 20rpx;
    12. 
  
  
  12.   border-radius: 50%;
    13. 
  
  
  13. }
    14. 
  
  
  14. 
  
  
  15. .userinfo-nickname {
    16. 
  
  
  16.   color: #aaa;
    17. 
  
  
  17. }
    18. 
  
  
  18. 
  
  
  19. .usermotto {
    20. 
  
  
  20.   margin-top: 200px;
    21. 
  
  
  21. } 
    22. 
 
 
 
 
    
  
  
  1. //index.js
    2. 
  
  
  2. //获取应用实例
    3. 
  
  
  3. var app = getApp()
    4. 
  
  
  4. Page({
    5. 
  
  
  5.   data: {
    6. 
  
  
  6.     motto: 'Hello World',
    7. 
  
  
  7.     userInfo: {}
    8. 
  
  
  8.   },
    9. 
  
  
  9.   //事件处理函数
    10. 
  
  
  10.   bindViewTap: function() {
    11. 
  
  
  11.     wx.navigateTo({
    12. 
  
  
  12.       url: '../logs/logs'
    13. 
  
  
  13.     })
    14. 
  
  
  14.   },
    15. 
  
  
  15.   onLoad: function () {
    16. 
  
  
  16.     console.log('onLoad')
    17. 
  
  
  17.     var that = this
    18. 
  
  
  18.     //调用应用实例的方法获取全局数据
    19. 
  
  
  19.     app.getUserInfo(function(userInfo){
    20. 
  
  
  20.       //更新数据
    21. 
  
  
  21.       that.setData({
    22. 
  
  
  22.         userInfo:userInfo
    23. 
  
  
  23.       })
    24. 
  
  
  24.     })
    25. 
  
  
  25.   }
    26. 
  
  
  26. }) 
    27.

新建的项目中，index 下都会看到这些代码，接下来分别介绍 wxml wxss js

wxml

这个是页面结构的描述文件, 主要用于以下内容

  • 用标签形式指定组件使用
  • 使用 wx:for wx:if 等指令完成一些模板上的逻辑处理
  • 使用 bind* 绑定事件

wxss

样式文件，和 css 语法基本一致，不过支持的选择器语法有限 看这里， 可以使用 flexbox 完成布局。

内部也可以使用 import 命令引入外部样式文件

 
 
    
  
  
  1. @import "common.wxss";
    2. 
  
  
  2. 
  
  
  3. .pd {
    4. 
  
  
  4.     padding-left: 5px;
    5. 
  
  
  5. } 
    6.

js

页面逻辑控制， 遵循 commonJs 规范

 
 
    
  
  
  1. // util.js
    2. 
  
  
  2. function formatTime(date) {
    3. 
  
  
  3.   // ....
    4. 
  
  
  4. }
    5. 
  
  
  5. 
  
  
  6. function formatDate(date, split) {
    7. 
  
  
  7.   // ...
    8. 
  
  
  8. }
    9. 
  
  
  9. module.exports = {
    10. 
  
  
  10.   formatTime: formatTime,
    11. 
  
  
  11.   formatDate: formatDate
    12. 
  
  
  12. } 
    13. 
 
 
 
 
    
  
  
  1. var utils = require('../../utils/util.js')
    2.

这里的js 并不是在 浏览器环境下运行， 所以 window.* 这一类的代码都会报错， dom 操作也是不被允许的，官方目前好像是不能支持其他的 js 库运行，全封闭式，这个以后应该会逐渐完善。

页面上使用 Page 方法来注册一个页面

 
 
    
  
  
  1. Page({
    2. 
  
  
  2.   data:{
    3. 
  
  
  3.     // text:"这是一个页面"
    4. 
  
  
  4.   },
    5. 
  
  
  5.   onLoad:function(options){
    6. 
  
  
  6.     // 页面初始化 options为页面跳转所带来的参数
    7. 
  
  
  7.   },
    8. 
  
  
  8.   onReady:function(){
    9. 
  
  
  9.     // 页面渲染完成
    10. 
  
  
  10.   },
    11. 
  
  
  11.   onShow:function(){
    12. 
  
  
  12.     // 页面显示
    13. 
  
  
  13.   },
    14. 
  
  
  14.   onHide:function(){
    15. 
  
  
  15.     // 页面隐藏
    16. 
  
  
  16.   },
    17. 
  
  
  17.   onUnload:function(){
    18. 
  
  
  18.     // 页面关闭
    19. 
  
  
  19.   }
    20. 
  
  
  20. }) 
    21.

当我们需要改变 绑定的数据时，必须调用 setData 方法修改，才会触发页面更新，像这样：

 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     data: {
    3. 
  
  
  3.         text: '这是一个页面'
    4. 
  
  
  4.     },
    5. 
  
  
  5.     onLoad: function() {
    6. 
  
  
  6.         this.setData({
    7. 
  
  
  7.             text: 'this is page'
    8. 
  
  
  8.         })
    9. 
  
  
  9.     }
    10. 
  
  
  10. }) 
    11.

条件渲染和列表渲染

以下内容来自微信官方文档。

小程序使用 wx:if="{{condition}}" 完成条件渲染，类似于 vue 的 v-if

 
 
    
  
  
  1.  True 
    2.

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

 
 
    
  
  
  1.  5}}"> 1 
    2. 
  
  
  2.  2}}"> 2 
    3. 
  
  
  3.  3  
    4.

wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

内置变量 index (数组遍历的下标)， item (数组遍历的每一项)

 
 
    
  
  
    2. 
  
  
  2.   {{index}}: {{item.message}}
    3. 
  
  
  3.  
    4. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.   items: [{
    3. 
  
  
  3.     message: 'foo',
    4. 
  
  
  4.   },{
    5. 
  
  
  5.     message: 'bar'
    6. 
  
  
  6.   }]
    7. 
  
  
  7. }) 
    8.

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名：

 
 
    
  
  
    2. 
  
  
  2. 
  
  
  3. {{idx}}: {{itemName.message}}
    4. 
  
  
  4. 
  
  
  5.  
    6.

事件绑定

wxml 只是用 bind[eventName]="handler" 语法绑定事件

 
 
    
  
  
  1. tap 
    2. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         console.log(e.taget)
    4. 
  
  
  4.     }
    5. 
  
  
  5. }) 
    6.

通过 data-* 和 e.target.dateset 传递参数

 
 
    
  
  
  1. tap 
    2. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         // 会自动转成驼峰式命名
    4. 
  
  
  4.         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    5. 
  
  
  5.     }
    6. 
  
  
  6. }) 
    7.

目前踩过的坑

事件绑定中 e.target.dataset

当在父组件绑定事件和参数，点击时又子组件冒泡事件到父组件，这个时候 e.target.dataset 为空

 
 
    
  
  
    2. 
  
  
  2. 
  
  
  3. tap
    4. 
  
  
  4. 
  
  
  5.  
    6. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         console.log(e.taget.dataset.testMsg) // undefined
    4. 
  
  
  4.     }
    5. 
  
  
  5. }) 
    6.

在线图片加载不稳定

在知乎日报这个项目上有大量图片需要从网上下载，这里 image 组件额显示显得极其不稳定，有很多的图片都显示不出来.

***

微信小程序现在还在内测阶段，有很多的问题需要完善，不过对于开发速度和体验来说还是不错的，期待正式发布的那一天。

资源

  • 官方文档
  • 开发工具下载
  • awesome-wechat-weapp

文章名称：微信小程序开发初体验
分享URL：http://www.shufengxianlan.com/qtweb/news31/262931.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站制作知识

分类信息网站

做网站　　 　成都二枢机房　　 　成都网站建设报价　　 　成都小谭网创广告　　 　手机app　　 　专业网站设计　　 　网站营销推广　　 　联通服务器托管　　 　php空间　　 　响应式网站设计　　 　手机网站制作　　 　企业网站建设　　 　成都网站运营维护　　 　犀浦防护栏定制　　 　重庆花箱　　 　成都微信开发　　 　品牌官网设计　　 　成都企业网站建设　　 　成都茶叶销售　　 　达州电信机房