一起开发微信小程序 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

一起开发微信小程序

发表时间:2021-4-30

发布人:葵宇科技

浏览次数:75

每个小程序包含三个必不可少的文件
app.js app.json app.wxss
app.js: 脚本文件, 在这里监听并处理小程序的生命周期 以及全局变量
app.json:叫程序全局配置, 比如底部导航条样式, 窗口背景色,默认标题等
app.wxss: 全局样式表

官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

案例包含知识点:
默认请求必须为 https, 开发时手动开启调试即可在 http 环境下运行
上拉加载 下拉刷新
分享转发
自定义分享转发按钮
轮播图循环滚动
模版的使用
html解析转换为小程序可解析(借助于wxParser)

具体的不一一介绍, 看效果上代码

项目目录列表

WX20170713-184232.png

1、页面布局 底部导航 两个分类 
2、主页面 顶部 轮播滚动 列表

1、底部导航 由 app.json

  1. 页面路径
  2. "pages": [
  3. "pages/index/index",
  4. "pages/detail/detail"
  5. ],
  6. 模版文件同样需要在app.json 声明, 首页 列表 item 使用
  7. "template": [
  8. "template/homeCell"
  9. ],

配置底部导航

  1. "tabBar": {
  2. "color": "#7A7E83",
  3. "selectedColor": "#ff3366",
  4. "borderStyle": "black",
  5. "backgroundColor": "#ffffff",
  6. "list": [
  7. {
  8. "pagePath": "pages/index/index",
  9. "iconPath": "image/nav_home_normal.png",
  10. "selectedIconPath": "image/nav_home_selected.png",
  11. "text": "数英"
  12. },
  13. {
  14. "pagePath": "pages/logs/logs",
  15. "iconPath": "image/nav_my_normal.png",
  16. "selectedIconPath": "image/nav_my_selected.png",
  17. "text": "我"
  18. }
  19. ]
  20. },

另外可以配置 全部网络请求超时 networkTimeout 具体参照 开发文档

首页 
index.wxml

  1. <import src="../../template/homeCell.wxml" />
  2. //swiper 轮播控件 circular 属性 true 无限轮播
  3. <swiper class="banner" circular="true" indicator-dots="true" indicator-active-color="#ffffff" autoplay="true" interval="4000" duration="1000">
  4. <block wx:for="{{imgUrls}}">
  5. <swiper-item>
  6. <image src="{{item.cover}}" class="slide-image" data-conType="{{item.conType}}" data-cover="{{item.cover}}" data-conId="{{item.conId}}" bindtap="clickAction"/>
  7. </swiper-item>
  8. </block>
  9. </swiper>
  10. <block wx:for="{{items}}">
  11. <template is="homeCell" data="{{item}}"/>
  12. </block>
  13. //额外创建一个加载更多item
  14. <view class="loadmore" >
  15. <text class="more_title">正在加载...</text>
  16. </view>
  17. //imgUrls json 数组
  18. //这里点击图片需要传递参数 详情 类型 详情顶部图片 详情 id
  19. //传参方式 data-conType="{{item.conType}}" 注意 获取时候 小写 data.contype 如下
  20. clickAction: function (event) {
  21. let data = https://www.wxapp-union.com/event.currentTarget.dataset;
  22. console.log('****' + data.conid);
  23. //点击打开新的页面并 传递参数
  24. wx.navigateTo({