自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚步或许会更有动力,我的笔记也是从哪里学习,记一些小笔记,我觉得大学里做这件事是最合适的了,当然最重要的是有没有兴趣,如果没有兴趣,就别把它当场一个学习的任务,找一项真正自己感兴趣的,去深度了解,做到很精才是真正有意义的事 微信小程序-01-项目组成文件介绍 官方文档: https://developers.weixin.…

[app] 一.app.json 1.对当前小程序的全局配置 2.页面路径.界面表现.网络超时时间.底部 tab 等 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor"…

简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 内容 UI组件 开发框架 实用库 开发工具 服务端 其他 Demo UI组件 weui-wxss ★804 - 同微信原…

根据上一文,已建立QuickStart 项目,该项目系本人毕设部分内容,所以记录以便以后查阅 开发小程序就必须了解小程序项目目录结构和文件作用,接下来就根据我现在自学得到的知识把这些记录下来. 一.目录介绍 首先这是该项目目录 小程序包含一个描述整体程序的app和对个描述各自页面的page,小程序的主体部分由三个文件组成----app.js.app.json.app.wxss,他们的作用如下 一个小程序页面由四个文件组成---js.wxml.wxss.json 二.配置介绍 全局配置 小程序根目…

微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在全力以赴的研究node,所以也没有仔细的研究这个风风火火的小程序.本以为此生无甚交集,但是最近公司却准备开发小程序,而我也"幸运"的被选中...... 小程序上线有有一段时间了,虽然还是在不断的更新,但是却大体趋于稳定,网上也积累了一定的教程和帖子,所以在研究了一下之后也就决定将自己学习小…

一.小程序结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 官网 1.1. 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配置 无 JSON 通过以上对比得出,传统web 是三层结构.而微信小程序 是四层结构,多了一层 配置.json 1.2. 基本的项目…

产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的"立即注册"按钮. 选择注册的帐号类型 选择"小程序",点击"查看类型区别"可查看不同类型帐号的区别和优势. 填写邮箱和密码 请填写未注册过公众平台.开放平台.企业号.未绑定个人号的邮箱. 激活邮箱 登录邮箱,查收激活邮件,点击…

进来之后可以看到五个文件和两个文件夹,一般新建的小程序项目都是这种格式,但有些可能会不一样,不用担心,因为我们所要关注的文件是不会变的 pages 小程序的页面放置文件夹,每一个页面(page)包含四个文件 page.js 页面代码逻辑文件 page.wxml 页面结构文件 page.wxss 页面样式文件 这里的局部配置会覆盖app.wxss中的配置 page.json 页面配置文件 这里的局部配置会覆盖app.json中的配置 这四个文件都与page同名,并且只作用于当前page utils…

之前就想学习一下微信小程序,只不过前段时间在学习Java中的一些线程的知识,拖了很久也没有实行这个目标,今天终于从网上找了一个完整的视频,来从头学习完整的开发流程,现在逐渐有一种想法,就是自己构建项目,开发项目完成的一整套流程,想弄的特别熟悉,没事的时候,有什么好的想法的时候,可以自己开发一个项目,从今天起,重视项目的构建,独立开发!这次是跟着视频讲解来做一下笔记! 一.构建项目 微信小程序的开发需要借助微信提供的生态,到微信公众平台上去申请账号,得到appId,做一些开发小程序的准备工作,具体…

目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3.1 数据绑定 3.1.1 普通写法 3.1.2 组件属性 3.1.3 bool类型 3.2 运算 3.2.1 三元运算 3.2.2 算数运算 3.2.3 逻辑判断 3.2.4 字符串运算 3.2.5 注意 3.3 列表渲染 3.3.1 wx:for 3.3.2 wx:for 3.3.3 wx:key…

小程序刚发布的时候何其风光,可能大家习惯性的对微信给予了过高的期待,加上一开始小程序的功能确实很孱弱,扫了很多人的兴. 经过最开始的热闹和喧嚣,如今微信小程序热度大减,但随着不断迭代,如今小程序的功能已经很完善了,可用性也高了很多,主要是经过一段时间的摸索,开发者已经能够冷静的看待小程序了,不适合的项目自动离场,适合的项目陆续进驻.小程序搜索功能开放后,越来越多的优秀小程序项目得到了曝光,近期微信也在运营上加大力度,针对各行各业做针对性的培训和宣讲,引导开发者找到小程序开发的正确姿势. 虽然小程…

此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图)   项目地址:https://github.com/zhijieeeeee/wechat-app-joke…

步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证.因此需要为 Bucket 设置跨域规则以支持 Post 方法. 步骤 2:配置外网域名到小程序的上传域名白名单中 通过 OSS 控制台查看外网域名. 登录微信小程序平台,配置小程序的上传域名白名单. 步骤 3:使用 Web 端直传实践方案 Demo 进行上传测试 下载应用服务器代码 修改 De…

前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面的dist文件夹,下载下来之后就把dist文件夹放到mpvue脚手架自动生成的static文档中.具体的目录层级各位都可以按自己的喜好来设计.贴上我的仅供参考. 步骤二:引入组件 我们需要在app.json文件中进行配置,其中有一个"usingComponents"配置属性.需要使用什么组…

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px     1px = 2.34pxiPhone6      1rpx = 0.5px 1px = 2rpxiPhon…

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用其转义字符即可实现该特殊字符的显示. decode可以解析的有   < > & &apos;      还有要注意的是要用<text></text>标签包裹,用<view></vie…

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi…

微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.g…

微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.g…

近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在微信开发者工具,考虑是不是语法不对, 3.看看是不是组件的问题,有些组件是禁用一些点击事件的. 1.数据更新 想改变data数据,并不是简单的data:{ }就可以的,因为视图层和逻辑层的数据更新不一致,所以需要使用API:this.setData({ }) 进行改变. 1.1 补充,如何用setD…

1.小程序介绍 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不在,随时可用,但又无需安装卸载. 2.学习资料的推荐 官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474643026176 开发工具: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/d…

最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法.因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考.例如,小程序的页面,其实不是一个页面,而只是一个方法构造器,甚至整个应用也都只是一个方法而已.这样的情况下,我们以前学到的很多面向对象的经验,例如继承之类的,在这里通通就没有用武之地了.不可否认这样对于一些新手来说,可能是一个不错的设计.但对于我们这种老炮来说,总是有一种要去改造它的冲动. 于是,我也就开始思考,看看能否对所有的页面做一个…

本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混乱. window: 用于设置小程序的状态栏.导航条.标题.窗口背景色: 属性 描述 表现 navigationBarBackgroundColor 导航栏背景颜色,如 #000000 navigationBarTextStyle 导航栏标题颜色,仅支持 black / white navigati…

最近刚好也在做新的小程序项目,所以有机会给大家整理一个完整的开发流程! 上一篇介绍是如何获得appid,那么接下来就是怎么新建一个全新的小程序项目了 首先:下载最新版的微信开发者工具,支持网页版微信开发跟小程序,我们选择小程序就好了 然后就是拿到申请好的appid,上篇说了怎么得到! 选择小程序项目后,出现如下图所示 然后将appid输入进去,项目名称随便写一个,项目目录的话,也随便在一个盘符中建立一个目录就好,填写完成后,选中目录所在盘符,点击确定 现在就已经初始化好了一个程序项目了! 下一篇…

上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公众号根据每次不同的主题显示不同的封面和照片,但是服务器又不想买贵的,思来想去,最后决定用小程序云开发,连服务器和公众号认证费都免了,哈哈哈哈 因为改成小程序云开发,所以需求也有了些变动,最后改成不需要后台,图片直接在云开发控制台中上传,然后在小程序中添加一个专门用来对封面和名称做修改的管理员页面,其…

首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vue专用的项目脚手架工具(但是官方要求安装2.9的) npm install --global vue-cli@2.9 第二步:创建一个基于 mpvue-quickstart 模板的项目 vue init mpvue/mpvue-quickstart my-project 默认都敲回车 第三步: 安装…

一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明(define -- 定义) html4.01 strict.transition.framset html:4s+tab xhtml strict.transition.framset 1.3语法特性 1.3.1 空白折叠现象 1.3.2 严格闭合 1.3.3 嵌套(p -- h) 1.4css选…

效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text> <image src='{{shift}}'></image> </view> <image wx:for="{{head}}" src='{{item.buyer_avatar}}'></image> <view…

1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter.js' const instance = axios.create({ adapter: wepyAxiosAdapter(axios), baseURL: 'https://API_HOST/api', headers: { 'Authorization': undefined…

官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本. wxml <!--logs.wxml--> <swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}&q…