微信小程序

https://www.jianshu.com/p/5df...

一、41030: invalid page hint: [tFIkAa07161511]调用了小程序生成二维码的接口却报41030: invalid page hint: [tFIkAa07161511]，查了一下起因发现了微信的限度： 1.传入page,生成指定页面的二维码必须要先把代码上传，提交审核并公布，而后在公布好的小程序里生成二维码的接口能力调用胜利，(体验版也不行，必须是公布下来的小程序，域名不能带端口号，真的好坑......) 2.传入的页面门路,pages后面不能加"/" 例如： 正确的写法："pages/login/loign" 谬误的写法："/pages/login/login" 3.小程序的参数不能超过32个字符 二、渠道起源统计小程序生成带参数的二维码的性能公布当天，咱们扫描二维码进行测试，却没有在微信后盾中看到相干的数据，就很奇怪，因为小程序后盾是能够统计带参数的二维码，最初在官网社区找到了问题的答案，小程序后盾的数据是在次日8：00-12：00更新，第二天数据的确更新了，依据须要，我又在小程序后盾配置了自定义事件，监听页面中指定的变量，emmmm......的确挺弱小，别弄那么多限度会更完满 三、小程序里应用webview标签跳转的H5页面链接前面不能携带参数在官网文档里阐明想要跳转内部链接就只能应用webview，然而webview竟然不容许链接前面携带参数。比方：https://xxx/xxx/xxx/#/xxx/xxx...你在小程序里跳转到这个页面，发现压根就拿不到跟在url前面的参数page和type，因为跳转过来之后参数没有了!!!没有了!!!没想到webview竟然对链接做解决，只有问号后面的局部，几乎吐血，就不能把链接残缺的给咱们吗？这太坑了，发现了这个问题后咱们只能长期写了一个截然不同的小程序页面，改成小程序的外部跳转 四、小程序图片展现1.应用<image/>标签 2.写在款式文件里: a.如果是本地图片，须要把图片转换成base64的格局； b.如果是服务器上的图片，间接应用图片链接，不须要转换成base64; 因为在款式文件里应用本地的图片url就必须把图片转成长长的base64的，太占空间，我就把图片全副上传到了服务器

一个基于微信的育儿小程序，开箱即用。 写在后面对于小程序的开发、部署、公布等相干问题请移步官网文档。征询问题的最好是产品自身。 外围性能宝宝模块 - 每个用户能够保护最多5个宝宝（超出的话，那要反思一下啦，哈哈）记录模块 - 用户能够记录每个宝宝的日常生活，如：吃、喝、拉、玩、学等关联宝宝 - 用户能够把宝宝分享给其它人并关联，关联后能够独特保护信息其中还包含登录、对于页面等。 部署阐明在部署前，你应该先理解小程序的申请、开发、公布流程，以及小程序的云开发性能。本文档不做介绍。 1.批改项目名称及 appid 配置下载代码后，开发者优先批改小程序的配置信息。你能够关上根目录下的 project.config.json 文件，批改 appid 和 项目名称。 { "appid": "your appid", "projectname": "your projectname"}2.应用小程序开发工具创立数据库目前小程序用到 4 个数据库汇合，开发者须要自行创立babies、posts、logs、relationship。 babies - 用于寄存宝宝数据posts - 用于寄存记录数据logs - 日志流水表relationship - 宝宝关联表3.批改数据库权限将所有数据库权限调整为所有用户可读，仅创建者可读写 4.创立 release 和 test 环境创立的时候要留神环境名称和 环境ID的区别，代码里用到的是环境ID，创立后不可批改。 release 和 test 是环境ID，不是环境名称！！！留神~~不可批改的哦。5.上传并部署云函数小程序云函数须要一个一个上传并部署，开发者能够一一上传。 在云函数上右键抉择『上传并部署』，不要上传本地 node_modules 文件6.批改云函数时区小程序云函数时区默认是 UTC+0，而北京工夫是UTC+8，须要针对每个云函数独自设置时区。 // 批改门路：云开发/云函数/版本治理/配置TZ = Asia/Shanghai小程序开发工具无奈批量批改，只能一一批改（很麻烦对吧）。7.公布你的小程序你认为就能公布了吗？并不能。因为微信审核太严格了，集体类型的小程序审核根本失败。 附录https://github.com/eyson/wech...

知晓云 高效、稳定的知晓云云服务 + 企业定制化服务，已成为各行业上云的首选。近期，知晓云帮助国企单位党支部顺利上线「智慧政企党建小程序」，为内部员工提供一个集「宣传、管理、教育、服务、沟通、考核」于一体的智能党建平台，打破组织内部信息壁垒、提高党务工作效率、促进党员学习与成长。党建小程序的发布，标志着该国企部门响应国家号召，顺应时代潮流，完成了数字化转型。 在过去的党务工作中，存在以下几个痛点： 没有线上交流平台，信息不对称，内部交流不足党务依赖传统的工作方式，效率低下，不智能党员教育方式和内容单一，缺乏学习积极性和教学检验 深入了解党务工作者在宣传、管理、教育各方面的复杂工作内容及工作流程，「智慧政企党建小程序」根据党务工作的实际应用场景，分为资讯、学习、工作、个人中心四个模块。群众可以及时了解最新资讯、参与组织活动，党员也可以在小程序上看到自己参与的活动与上级下达的任务。「智慧政企党建小程序」使得党务工作智能化，数据化，可追踪，可溯源，极大地提高了党建任务的落实效率。 「智慧政企党建小程序」是知晓程序团队基于旗下 serverless 服务——知晓云平台完成的又一个新的行业案例。知晓云从立项到小程序上线再到客户企业内部的大力推广使用，仅用了一个月，这得益于知晓云对小程序平台的深度定制化支持。 知晓云团队可以在梳理清楚需求及客户沟通确认执行方案后，迅速完成小程序搭建，并交由团队内的测试工程师进行灰度测试等多维度测试，保质保量按时交付。此前与默林集团合作，围绕「默林魔法游」构建的小程序矩阵、与教育部合作的各类校园导览小程序均使用知晓云进行独立开发。 △ 扫码体验「曼谷海洋世界」小程序 △ 扫码体验「参观北大」小程序 知晓云负责人表示： 不同行业之间的业务流程虽然千差万别，但是其核心功能逻辑基本上万变不离其中。知晓云作为云服务平台，致力于帮助企业在新型基础设施建设（简称：新基建）时代更好的完成上云的需求。我们提供了便捷易用的 SDK ，使得个人开发者可以使用知晓云又快又省的完成小程序开发，同时也提供了企业级定制服务，帮助各行各业完成小程序领域的战略布局。目前，知晓云已经帮助文旅、教育、电商、线下零售、社区、政务等领域的企业完成上云计划。未来，我们期待与各行业工作者一起探索新的「云作业」形态，在 5G 浪潮中寻找新的可能。

setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。 示例代码： index.wxml <view>{{name}}</view><button bindtap="changeName"> Change name data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>index.js // demo.jsPage({ data: { name: 'jiqing', num: 0, array: [{text: 'init data'}], object: { text: 'init data' } }, changeName:function() { this.setData({ name:'zhangsan' }) console.log("点击了修改名称"); console.log(this.data); }, changeNum: function() { this.data.num = 1 this.setData({ num: this.data.num }) }, changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } })这里的bindtap很有意思，绑定一个点击事件。 ...

当然，React DevTools 是没法用来直接调试小程序的。 但是利用 Remax 小程序框架，我们就可以做到利用 React DevTools 来调试了。 Remax 是一个基于真正 React 开发的小程序框架，https://remaxjs.org首先新建一个 Remax 项目（以阿里小程序为例）： $ npx create-remax-app hello-remax$ cd hello-remax$ npm install安装 React DevTools 并启动： $ npm install react-devtools -g$ react-devtools使用小程序开发者工具打开 hello-remax 目录，等待小程序编译完成，就能在 React Devtools 进行调试啦。

上一章节，我们讲了小程序得模块化，怎么封装wx.request来发送请求。 这一章节我们讲的是开发项目过程中在开发环境，生产环境设置不同得请求接口域名。 新建 config.js在 src/es6 目录，新建一个config.js文件 export default { BRAND:{ name:'guojiangxiansir' }, GLOBAL: { baseUrl: process.env.NODE_ENV === 'development' ? 'https://guojiang.club/' : 'https://guojiang.club/' // 运行时自动替换变量 }, VERSION:'1.0.0'}我们在 config.js 文件定义了两个变量,一个是BRAND一个是GLOBAL process.env.NODE_ENV不懂什么意思的可以先 console.log(process.env.NODE_ENV)出来看一下，其实是你项目现在所处的环境，是为 development 开发环境，还是production 生产环境。 如果现在 process.env.NODE_ENV == 'development' 就是第一个域名，如果是生产环境就是第二个域名。 项目运行的命令： npm run dev //开发环境npm run build //生产环境想知道为什么的可以看package.json这两行代码： "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --watch --progress --colors --config webpack.dev.config.js", "build": "webpack --progress --hide-modules --config webpack.prod.config.js" },dev 运行的是 webpack.dev.config.js文件 ...

4-3上一章节我们了解了小程序的页面使用 Page({}) 注册，数据 data，生命周期函数，事件处理函数都可以被接收。 先静后动，我们的首页已经是一个静态页面了，所以我们需要用数据来渲染首页。 wx.request 后台数据交互发送 HTTPS 网络请求。 wx.request({ url: 'https://guojiang.club/api/sir/card', //真实的接口地址 header: { 'content-type': 'application/json' // 默认值 }, data:{ //传入的数据为page，页数 page:1 } //HTTP 请求方法，默认值为get method:'GET', success (res) { // 接口调用成功，在这里就可以获取到数据 console.log(res.data) }, fail(rej){ //接口调用失败 console.log(rej.data) } })使用前说明在使用 wx.request 之前，我们需要注意以下两点： 服务器域名配置进入 https://mp.weixin.qq.com，输入账号密码登入在菜单栏找到 ”开发“-”开发者设置“点击”修改“按钮，在 ”request合法请求域名“ 添加，例如：https://guojiang.club 如果你的这个域名只是测试环境的域名，你并不打算拿来上线的，就需要你在微信开发者工具勾选 勾选完”不合法域名校验之后“，你可以看看你的调试基础库，是不是最新的，如果不是勾选使用人数最多的。 这些都做好之后，我们就可以在 index.js里写方法请求数据了。 代码实例分析// index.js 代码Page({//data 是页面第一次渲染使用的初始数据 data:{ //声明一个 cradList 变量，初始值为“[]”,一个空数组 cardList:[] }, onLoad(){ //调用getIndexCard()方法，this指向整个小程序实例 this.getIndexCard(1) }, //获取首页数据信息 getIndexCard(page){ wx.request({ url: 'https://guojiang.club/api/sir/card', //真实的接口地址 header: { 'content-type': 'application/json' // 默认值 }, data:{ //传入的数据为page，页数 page:page }, //HTTP 请求方法，默认值为get method:'GET', success:res=> { // 接口调用成功，在这里就可以获取到数据 res = res.data; if(res.status){ this.setData({ cardList:res.data }) } }, fail:(rej)=>{ //接口调用失败 console.log(rej.data) } }) }}) 我们上面已经已经写了 getIndexCard 这个方法，可以调用 https://guojiang.club/api/sir/card 这个接口，获取列表的数据。 ...

上一章节的知识真的是干货满满，学到了用 setData() 可以给数据赋值，可以使用 wx.request 发送 HTTPS 请求，使用{{}}绑定数据。 不知道大家发现没有，后端给我们的数据是分页的。 所以我们这章来学习小程序里数据分页应该怎么处理。 分页数据的处理Page({ data:{ cardList:[],//列表 page:1,//当前页数 has_more:true // 是否还能分页 }, onLoad(){ this.getIndexCard(1) }, //获取首页数据信息 getIndexCard(page){ wx.request({ url: 'https://guojiang.club/api/sir/card', //真实的接口地址 header: { 'content-type': 'application/json' // 默认值 }, data:{ //传入的数据为page，页数 page:1 }, //HTTP 请求方法，默认值为get method:'GET', success:res=>{ // 接口调用成功，在这里就可以获取到数据 console.log(res.data); res = res.data; if(res.status){ let pages = res.meta.pagination; //获取后台分页的分页数据 pagination let current_page = pages.current_page;//获取当前是那一页 let total_pages = pages.total_pages;//获取总页面数 //下面我们来赋值，这里会用到 es6 的模板字符串,有不懂得我们下面详细讲解 this.setData({ [`cardList[${page-1}]`]:res.data, page:current_page, has_more:current_page < total_pages }) } }, fail(rej){ //接口调用失败 console.log(rej.data) } }) }})我们在 data 里面声明了两个新变量 ...

上一章节我们讲了分页数据的处理， setData数据限制的解决办法，模板字符串以及触底分页获取数据。 那么这一章节我们学习小程序的模块化。 模块化可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。 模块只有通过 module.exports 或者 exports 才能对外暴露接口。通过 require方式引入 exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。同时小程序是支持 ES6 的 export 来暴露接口的，模块引入通过 import。 封装 wx.request在 src/es6目录下新建一个 sandBox.js 文件 export const sandBox = { get({api, data, header}){ return new Promise((resolve, reject) => { wx.request({ url:"https://guojiang.club/"+api, header:header, data:data, method:'GET', success:res => { resolve(res) }, fail:rej => { reject(rej) } }) }) }, post({api, data, header}){ return new Promise((resolve, reject) => { wx.request({ url:"https://guojiang.club/"+api, data:data, header:header, method:'POST', success:res => { resolve(res) }, fail:rej => { reject(rej) } }) }) }};或者第二种暴露模块的方式：//module.exports.sandBox = sandBox//需要去掉 export在 src/es6 目录新建一个 myapp.js文件，主要用来放各个js模块。 ...

4-2在上一节，我们已经把 index.wxml 跟 index.wxss 写完了。 这一件我们来讲 index.json 页面配置跟 index.js与小程序 page 页面生命周期。 页面配置每一个小程序的页面也可以使用 .json 文件来对本页面的窗口表现进行配置。 请注意： 页面中的配置项会覆盖 app.json 的 window 中相同的配置项。 页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。# index.json{ <!--导航栏标题文字内容--> "navigationBarTitleText":"果酱先生"}我们这里的文案虽然是一样的，但是 navigationBarTitleText 还是覆盖了app.json里面的。 页面逻辑层使用 Page 构造器注册页面这也就是为什么我一开始强调 index.js 里面一定要写 Page({}) 不然会报错的原因。 # index.js 代码Page({<!----> data:{ }, onLoad(){ // 页面创建时执行 }, onShow(){ // 页面出现在前台时执行 }, onReady() { // 页面首次渲染完毕时执行 }, onHide() { // 页面从前台变为后台时执行 }, onUnload() { // 页面销毁时执行 } })我们先来讲解一下我们上面 Page({})构造函数出现的常用的属性。 ...

电商小程序中，用到瀑布流的地方非常多，每次都写一个瀑布流，重复一次逻辑，作为程序员，肯定是非常不愿意的。 瀑布流的形式都是大同小异，不同的是瀑布流中每个模块的内容，随业务而变化。 所以，我们把瀑布流框架抽象成组件，瀑布流的内容由业务确定。这样即可实现组件化和自定义的最大平衡，微信小程序组件源码。 首先，我们来看一下瀑布流组件在实际项目中的实际效果。 1 实际效果瀑布流组件实际效果如下图所示，左侧为用户交互效果，右侧为图片懒加载实际效果。 2 什么是瀑布流？瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，waterfall-item宽度固定，高度不定，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。如下图所示: 3 实现功能该瀑布流组件实现了以下几个功能： 支持图片懒加载支持上拉数据翻页支持自定义样式支持瀑布流Item间隔底层自动计算原生组件模式：即类swiper和swiper-item 组件用法组件与数据完全解耦4 实现原理4.1 waterfall 和waterfall-item实现原理第一步：在 waterfall-layout 目录下创建 waterfall 和 waterfall-item 组件，目录结构如下： .├── query-node.js├── waterfall-item.js├── waterfall-item.json├── waterfall-item.wxml├── waterfall-item.wxss├── waterfall.js├── waterfall.json├── waterfall.wxml└── waterfall.wxss第二步：分别在waterfall.js 和 waterfall-item.js的relations选项中指定组件父、子级关系： // waterfall.jsComponent({ // ... other code relations: { './waterfall-item': { type: 'child', }, // ... other code }})// waterfall-item.jsComponent({ // ... other code relations: { '././waterfall': { type: 'parent', }, // ... other code }})指定彼此的父、子组件的关系后，即可通过 this.getRelationNodes 原生 API，就能访问彼此实例对象及其属性和方法。 ...

4-1经过上一章节的学习我们已经搭建了项目的整个框架，雏形已成。接下来我们只需要的往里面堆东西就可以了。 设计稿网址（14天分享有效，过期的可以找我拿）：https://lanhuapp.com/url/Airvn密码: I4DA分析首页设计稿写代码一定要注意细节和结构性，拿到设计图首先分析应该怎么做，应该有哪些模块，哪些模块可以通用，一定要经过设计之后再动手去写。 从设计稿可以看出，图片是通屏的。经过与设计师沟通，而且还是轮播图，上下滑动的。上面有“HOT” 跟 “衣品圈” 两个Tab切换 。 下面是 Tabbar 标签栏，有“打卡”、“+”、“我”共 3 个标签，分别去到不同的页面。 右边有“头像”、“点赞”、“分享”。 通屏轮播图给大家介绍两个微信小程序官方组件。 view：视图容器，相当于div。swiper: 滑动视图容器。其中只可以放置swiper-item组件，常用来放轮播图。image：用来放图片的组件。下面我们用这两个组件来写通屏轮播图 # index.wxml 代码<!--一个大盒子包住所有的元素--><view class="container-fill"><!--包住 swiper 组件--> <view class="scroll-fullpage" style="height: 100%"> <!--swiper组件用法，里面只能放swiper-item组件，我们项目中需要的轮播图上下滑动，所以设置 vertical="true" 代表滑动方向为纵向。--> <swiper circular="true" vertical="true" style="height: 100%"> <!--放了两个 swiper-item，相当于有两个子项，滑两下 --> <!--第一个子项--> <swiper-item> <!--swiper-item 组件里面可以放任何的东西，我们这里放了图片--> <!--src代表图片的url，mode为图片的裁剪，缩放的模式，aspectFill保持纵横比缩放图片--> <image mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590745760463&di=50d76742c6cb334acdac656a930c52e7&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F27%2F20190927092410_yyrsn.thumb.400_0.jpg" class="slide-image"> </image> </swiper-item> <!--第二个子项--> <swiper-item> <image mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590747427893&di=9fa9371dfd6f8ffcd062b18eeff58ec5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2019-09-11%2F5d789c0b24214_200_300.jpg" class="slide-image"> </image> </swiper-item> </swiper> </view></view>代码分析大白话（注释里面也挺详细的）：view相当于 div ，是一个容器，不可以滑动。swiper是一个可以滑动的的容器，vertical = "true" 表示滑动方向为纵向，circular="true" 表示采用衔接滑动，如果不理解衔接滑动可以把这个属性先去掉，然后体验一下区别。swiper-item 是swiper 的滑块，如果加入滑动内容，那么就在swiper-item中添加，宽高自动设置为 100% 。image组件放在swiper-item 中，其中的mode属性最常用的是widthFix，表示图片宽度100%，高度自适应。我觉得有点像背景图的感觉。上面是 wxml的代码，接下来是样式。 # index.less代码<!--将大盒子通屏，这个方法请记住用固定定位的方法通屏。不会出现各个机型有白边的情况不熟悉less的同学，就去百度看一下。其实就是层层嵌套的感觉。其实这里的选择器,例如：.container-fill { .scroll-fullpage{ }}就相当于css的：.container-fill .scroll-fullpage{ }-->.container-fill{ position: fixed; top: 0; bottom: 0; left：0; right:0; overflow: hidden; z-index: 10; .scroll-fullpage { height: 100%; transition: all 0.3s; swiper { height: 100%; image { width: 100%; } } }}Tab 栏切换“HOT” | “衣品圈”Tab 栏 肯定是不属于可以滑动的轮播图那一块的。所以我们需要将 Tab 栏放在 swiper 外面，需要跟 swiper 同级。 ...

Git项目地址 扫码体验Demo小程序 一、描述 小程序经常需要将服务器传回的数据进行换行，传回的数据经常用 \n 或 <br /> 分隔数据，小程序.wxml文件会将返回数据中的 \n 处理成字符串n, 不能得到我们想要的换行结果。所以我们需要将数据进行特殊处理。 二、解决办法 将<view>标签换成<text>标签<view class="page"> <view class="page__hd"> <text class="page__desc">{{tools.replaceLine(question.question)}}</text> </view></view>添加wxs模块(/miniprogram/tools/tools.wxs)使用replace替换n和<br/>, 匹配\n需要使用\\\\4个斜杠，因为\\匹配一个\；传入的参数需要判空，若传入的参数为空replace会报错var replaceBr = function (val) { return val ? val.replace(getRegExp("<br />", "g"), "\n") : val}var replaceLine = function (val) { return val ? val.replace(getRegExp("\\\\n", "g"), "\n") : val}module.exports.replaceBr = replaceBrmodule.exports.replaceLine = replaceLine在.wxml文件引入创建的wxs模块，并调用指定的函数<wxs src="../../tools/tools.wxs" module="tools" /><view class="page"> <view class="page__hd"> <text class="page__desc">{{tools.replaceLine(question.question)}}</text> </view></view>三、结果 { "question":"(1)小张迟到两小时 \n (2)一女同志骑车摔倒被人送往医院 \n (3)小张的奖金未被扣除还得到奖励 \n (4)办公室规定迟到扣半月奖金 \n (5)小张上班后说自己去修了一下车 \n 请按逻辑排序", "option":[{"key":"A","value":"1-5-4-2-3"},{"key":"B","value":"4-2-1-5-3"},{"key":"C","value":"2-1-4-5-3"},{"key":"D","value":"4-1-2-3-5"}], "answer":"D","analysis":"无", "status":"1", "position":106, "create_at":"2020-06-05 16:46:36", "update_at":"2020-06-05 16:46:36"}! ...

使用GitHub Actions、mp-ci为Taro项目添加持续集成，让开发飞上天。 mp-cimp-ci是微信小程序(游戏)发布助手, 支持预览和上传。可以直接接入开发流程中，提高研发效率。 基于官方miniprogram-ci封装，比它的老大哥 mini-deploy 好了很多倍，再也不需要安装开发者工具，也不用考虑登录、操作系统的问题。 自动读取appid、setting上传信息（版本和备注）自动生成美化执行结果更多说明直接访问 mp-ci。 准备工作下载私钥使用前需要使用小程序管理员身份访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP 白名单。 这里需要关闭IP白名单，因为无法确定GitHub服务器的IP范围。 设置私钥到GitHubmp-ci是通过文件形式接受私钥的，但是把私钥直接放到GitHub上显然是不安全的。 这里我们使用GitHub的Secrets来存储私钥内容，然后在执行时再创建私钥文件。 打开仓库的Settings/Secrets页面设置接口，假设我们存储的名字是UPLOAD_PRIVATE_KEY。 GitHub Actions 配置新建.github/workflows/build.yaml文件。 也可以在Actions一栏，选择Node.js或者set up a workflow yourself。 使用以下内容填充： name: MP CIon: push: branches: [ master ] pull_request: branches: [ master ]jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [10.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Dependencies run: npm i - name: Build weapp run: npm run build:weapp # 从 secrets.UPLOAD_PRIVATE_KEY 生成私钥文件 # see Project/Settings/Secrets - name: Generate private key for upload run: echo "$UPLOAD_PRIVATE_KEY" > private.key env: UPLOAD_PRIVATE_KEY: ${{ secrets.UPLOAD_PRIVATE_KEY }} # 上传代码 - name: Upload to WeChat run: npx mp-ci upload ./ --pkp=./private.key --no-test结果 ...

上一章节我们构建了小程序的第一个页面。 3-6 app.js每个小程序都需要在 app.js 中调用 App 方法注册一个小程序实例。 用白话说就是，你不注册它，你就不能拥有一个小程序。 废话不多说，直接上代码。 //app.jsApp({ onLaunch (options) { // 可以写代码 }, onShow (options) { // 可以写代码 }, onHide () { // 可以写代码 }})App(Object object)注册小程序。接收一个 object 参数，来指定小程序的生命周期回调、全局任意函数、全局数据变量等。 onLaunch()小程序初始化完成时触发，全局只触发一次。 onShow() 小程序启动，或从后台进入前台显示时触发。 onHide()小程序从前台进入后台时触发。 3-7 app.wxss小程序公共样式表 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。 跟 CSS 相比，WXSS 扩展了两个特性。 尺寸单位 rpxrpx : 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。 设备rpx换算px (屏幕宽度/750)iPhone51rpx = 0.42pxiPhone61rpx = 0.5pxiPhone6 Plus1rpx = 0.552px所以在开发小程序时，我们的设计稿都是用 iPhone6 作为视觉稿的。 ...

上一小节我们虽然构建了项目的目录，也配置了几个必要文件，但是我们的项目还是不能编译起来，我们还需要完善app.json、app.js、app.wxss这3个文件跟之前我们说的src/pages/index文件夹。 3-4 新建第一个页面有人会疑惑，为什么配置app.json之前需要新建第一个页面，你们忘记了吗？app.json里面有一个pages属性，是必选项。 pages数组事页面路径列表。 配置编辑器 less 自动 编译成 wxss因为我们是用 less 开发通过编辑器自动编译成 wxss，所以我们需要对编辑器进行一些配置。 下面介绍 Webstorm 跟 VScode 这两种常用编辑器的配置。 webstorm 菜单栏 “File” > “Settings” > “Editor” > “File Types”将 HTML 添加一项 .wxml 将 CSS 添加一项 .wxss 菜单栏 “File” > “Settings” > “Tools” VScode 从 VScode 商店中下载 Easy LESS 插件。配置 settings.json 文件 （文件 - 首选项 - 设置 - 搜索设置 settings.json ）,加入如下代码:"less.compile": { "outExt": ".wxss" }在 index 文件夹里新建 4 个文件来搭建第一个页面新建后缀名为 .json 的文件，不能为空。 ...

上一小节，我们学习了小程序的代码构成。接下来我们就可以学习来搭果酱先生这个项目的脚手架。 之所以要自己搭建脚手架，是为了让 Webstorm 或者 VScode 可以实时编译小程序代码，提高开发效率。 3-2 项目脚手架搭建果酱先生是使用 webpack，bable，less 开发的微信小程序项目，如果你还是新手不了解这些也没有关系，你只需要按照步骤一步步来也可以搭建好的。 在搭建之前，你需要先安装以下应用程序即可： Node.js (版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)Git如果你的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。 安装 Node.jsNode.js 先前版本下载地址：https://nodejs.org/en/downloa... 注意：下载版本建议为 10.X 版本安装完成之后，打开命令提示符输入命令: # 查看 Node.js 版本node -vv10.20.1安装 GitWindows：下载并安装 下载地址：https://git-scm.com/download/winMac： 下载地址：https://sourceforge.net/projects/git-osx-installer/Mac 用户如果在编译时遇到问题，需要先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。 全局安装 LessLess 是一门 CSS 预处理语言，让 CSS 更易维护、方便制作主题、扩充。 如果你觉得你是新手，没有接触过 Less，也不用害怕，你先安装就是的，在后面的项目中，我会手把教你的，很简单。 打开命令提示符，输入命令： npm install -g less初始化项目在 E盘 新建一个项目文件（如：mini-sir-wechat ） 然后右键 Git Bash Here ,输入命令 ...

在学习这个小程序项目之前，黔在在碎碎念，光看不做是虚架子，你需要的是在电脑面前跟着我一步一步的实践，带你从 0 开始构建果酱先生这个项目。 2-1 申请 AppId开发小程序的第一步。 AppId 是什么我们每个人都有属于自己得身份证，AppId 就是小程序在小程序平台的身份证。也就是说，一个 AppId 只能对应一个小程序。 步骤先注册一个属于自己的小程序账号。# 网址https://mp.weixin.qq.com/wxopen/waregister?action=step1注意：每个邮箱仅能申请一个小程序，请根据申请账号的流程进行申请，申请完成之后，请务必记住自己的邮箱跟密码。 登录小程序管理平台，使用你刚刚注册的邮箱跟密码。# 网址https://mp.weixin.qq.com/点击菜单栏 “开发” - “开发设施”，就可以看到这个小程序的 AppId 了。 点击 “生成” 按钮之后，你需要记录你的小程序秘钥，因为小程序秘钥只展示一次。 2-2 下载并安装开发者工具在上一节的学习中我们已经有了 AppId 了。 为了高效的开发和调试微信小程序，我们需要安装微信开发者工具。 # 网址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html根据电脑系统下载相对应的版本 下载安装完成之后，打开微信开发者工具，使用注册小程序账号的时候绑定的管理员微信扫码登录。 项目名称 —— 如 HelloWorld目录 —— 选择你要将这个项目放在那里AppId —— 填写我们上面申请的 AppId点击“新建”，这样我们就快速构建了一个项目名称为 HelloWorld的小程序。 总结注册的小程序账号用来登录微信后台，管理小程序的发版、成员等。AppId 跟小程序秘钥必须记录下来。每一个账号对应一个小程序，也就是说 AppId 跟 小程序一一对应。微信开发者工具是开发小程序项目的必备调试工具。 本文由博客群发一文多发等运营工具平台 OpenWrite 发布

上一章节我们已经知道如何申请小程序的AppId,并且也安装了微信开发者工具。接下来我们需要了解小程序的代码构成。 3-1 官方种子项目与小程序代码构成在上一章节我们已经利用微信开发者工具快速构建了一个名称为 HelloWorld的 小程序项目，可以借这个项目来看看。 点击菜单栏 “编辑器” ，就可以看到这个小程序的代码构成了了。 可以看出构建小程序项目，根目录下必须要有 app.js,app.json,app.wxss 这3个文件。 pages 目录是用于存放页面，每个页面就是一个文件夹，分别由.json、.wxml、 .wxss、.js 文件构成。 utils 目录主要用于存放各种工具类，全局方法等。 JSON 配置项目的根目录app.json，是小程序的全局配置。 也就是说，小程序的所有页面路径、所有界面表现、底部tab等都在这里面统一配置。 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json"}我给大家讲一下这个配置各个项的含义: pages 字段 指定小程序由哪些页面组成，每一项都对应一个页面的路径信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。也就是说，你的小程序新增或者减少页面，都需要对pages数组进行修改 window 字段 用于设置小程序的状态栏、导航条、标题、窗口背景色。 别急，如果你不是很理解的话，我们后面会在项目中详细的讲。 WXML 模板WXML 相当于 HTML 的角色，用来描述当前页面的结构。 小程序给我们包装好了有基本能力的标签，还提供了地图、视频、音频等组件能力。 常用的有 view 、button 、text 等。相当于 HTML 中的 div、button、span。 项目中会详细讲解。 WXSS 样式WXSS 具有 CSS 大部分的特性，跟 CSS 一样用来描述页面的样子。 ...

https://segmentfault.com/a/11...之前参照上面文章 可以实现绝对路径的引入 但是在vscode中 require函数无法自动提示路径 并且require的模块也不能自动提示 为了解决这个问题 1.根目录建立 jsconfig.json 文件 { "compilerOptions": { "target": "ES6", "baseUrl": ".", "paths": { "/*": ["./*"] } }}2.在使用 require 函数的js文件 最前面加上 const app = getApp();(function () { require = app.require; })();3.使用 const CommonApi = require("/api/common");CommonApi.CallApi1(); //可以自动提示出方法 可配合d.ts食用

小程序生成带参数的二维码的功能发布当天，我们扫描二维码进行测试，却没有在微信后台中看到相关的数据，就很奇怪，因为小程序后台是可以统计带参数的二维码，最后在官方社区找到了问题的答案，小程序后台的数据是在次日8：00-12：00更新，第二天数据确实更新了，根据需要，我又在小程序后台配置了自定义事件，监听页面中指定的变量，emmmm......确实挺强大，别弄那么多限制会更完美