potato123232的博客

目前微信小程序和微信用户的信息是脱钩的（之前的wx.getUserProfile与wx.getUserInfo都不能正常使用了），你看一下其他的小程序也会发现这个问题，微信的昵称不会出现在小程序中了。目前一键登录一般是用服务商提供的本机一键登录功能，有特定的API。其中未登录页面中只有一键登录有用，其他都是写死的，一键登录的功能仅仅是切换到登录的页面。网上的接口可能会挂掉，搞一个本地方便看小程序的样式，我用的是django做后端框架。还有下面两种登录方式。这个页面中除了退出登录按钮，其他所有都是写死的。

限制高度的值根据机型进行调节，wx.getWindowInfo()可以获得当前机型的高度，减50是减去屏幕最下方的tarbar高度。目前小程序结算功能是不开放给个人开发者的，如果要开通的话只有一个公司的营业执照也是不行的，需要有实际的开发需求才能用微信支付的接口。这个变量是给"我的"中的一键登录按钮用的，直接点一键登录按钮就不需要跳转，从购物车界面过来再点一键登录按钮就需要跳转。每一次点击左侧的时候，右侧的内容是不同的，但实际上元素都是一个。紫色框子是一级标题，橙色框子是二级标题，绿色框子是三级标题。

在app.js中定义全局变量base_url。

首先整你此次要预览的所有图像，也就是轮播图中的所有图像，搞一个列表。我在getGoodsList中有定义，如果isTop为true就将新得到的数据放在列表的头部，如果isTop为false就将新得到的数据放在列表的尾部。goods_detail分为三个区域，从上到下依次是 轮播图区域，商品信息区域，富文本区域(富文本也是描述商品信息的，格式为html)，尾部区域。上拉触底是默认生效的，所以我们不需要进行额外的配置，只需要在goods_list.js中定义上拉触底的方法就可以了。携带参数为goods_id。

js中干了两件事，一个是通过properties收数据，另一个是通过方法向上传数据，这里的e.target.dataset不可省略，因为要向上传递goods_id。在这里给所有的元素都给上了data-goods_id是怕goods_id传不出去，怀疑是和事件冒泡有关，应该有更简便的写法，如果不想思考就给每个元素都加上。e.target.dataset是传递参数，我们在组件中没写参数，也不需要传递参数，所以可以删掉。数量框就是这个，该项目中只有购物车中用到了数量框，所以实际这个没必要封装。

每一页的限制基本是不变的，在下拉刷新与上拉触底时页数+1就行了（打开页面就会按初始值立即执行一遍getShoplist()，所以在下拉刷新和上拉触底中getShoplist()前就需要page+1）上拉触底与下拉刷新应该加上是否没有新的请求数据这种情况，判定res.data是不是长度为0就行了，我没写，小项目让用户多请求几次也没什么问题,上拉触底我没写，他也不会发起新的请求。不是所有的九宫格都有信息的，这个是后端接口的问题，我们点击美食是有信息的。首页就是简单的请求输入，然后渲染到主页的结构上。

比较重要的就是这个启动页面，每一次你重新编译的时候会自动跳转到index，如果你想编译后显示其他页面，你可以在这里进行更改下面的启动参数就相当于路由的查询字符串上面的模式名称用户自定就行了我们现在这样搞。

在 真机 上下拉的效果不会自动关闭，我们需要在onPullDownRefresh()的最后加上wx.stopPullDownRefresh()实现完成动作后关闭效果。上拉触底就是你逛 电商APP 的时候，你向下拉商品的时候，发现下面总是有商品，你拉到一定程度的时候就会给你自动加载一批新的。在页面的JS文件中有一个 onPullDownRefresh()，我们在里面写上想执行的内容就行了。首先你需要在页面(或全局)中启用下拉刷新，下拉刷新一般只在页面中配置。配置之后进行编译，然后向下拽页面，就会有这种效果。

API有三大类，事件监听API，同步API，异步API事件监听API都以on开头，比如wx.onWindowResize()监听窗口尺寸变化事件同步API都以Sync结尾，同步API可以通过函数返回值直接获取，执行出错会抛出异常。比如 wx.setStorageSync()可以向本地存储写入内容异步API需要通过回调函数接收调用结果，类似$.ajax()需要通过success来获取结果。比如wx.request()就需要通过success来接收响应数据我们下面说几个常用的api。

swiper的常用属性还有下面这些，如果不加circular，那么切换到第三张的时候再往右拖是不会拖到第一张的，如果加上circular，切换到第三张的时候再往右拖可以拖到第一张。只写text你在手机上是不能选中的，我们可以加上selectable实现长按选中文本内容的效果。scroll-y是允许纵向滚动，scroll-x是允许横向滚动。indicator-dots是轮播图下方的点，如果不写就没有点。图像有默认的宽高，宽约300px，高约240px。scroll-view是一个有滚动条的div。

app.js中定义的全局变量适合 不修改且仅在js中使用的变量。

第一个参数是键，第二个参数是值，我放在生命周期函数中了，所以一编译就会有。之前有logs页key这两个键，现在全没了。之前有logs这个键，现在我把这个键删了。

自定义图标就要用这个东西首先搞wxml，我当前的index.wxml是这样的<van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item>

分包是把一个完整的小程序划分为不同的子包，用户在使用时按需进行加载这样做有两点好处。

就像 vue 用 vuex 做全局数据共享一样，在小程序中 使用 mobx-miniprogram配合mobx-miniprogram-bindings 做数据共享mobx-miniprogram是创建store实例对象的。mobx-miniprogram-bindings把store中共享的数据与方法绑定到组件或页面中。

安装之后会在项目路径下出现这个目录，这个目录中又我们之前安装过的npm包。我们删除掉 miniprogram_npm 这个目录。进入 app.js，然后写下面这些东西。构建之后就自动变成这样。然后点击构建 npm。

比如我们不喜欢这个danger按钮的红色，但是用到的地方又太多了，这个时候我们自己一个一个搞就很麻烦。除去上面三种，能用的包就不多了，所以如果不是用过或是看别人用过，自己开发的时候最好不使用npm的包。像上面那样是全局生效，如果你只想在某一个页面中生效，那么你就在该页面的css定义这个变量。如果你用了非官方的组件库，那么建议你不要在使用官方的组件库样式了，不然会造成样式混乱。安装完毕后会生成package.json文件，里面有你刚刚下载好的包的版本。我们可以自己搞样式，样式的名称在这里。

在微信小程序中使用 behaviors 进行代码共享，功能类似于vue的mixins每个behavior可以包含一组属性、数据、生命周期函数和方法每个组件可以引用多个behavior，behavior也可以引用其他的behavior。

自定义事件可以传递任何类型的数据父组件要做的事情子组件要做的事情打开后是这样的点击传递之后是这样的。

目录1 单个插槽2 多个插槽2.1 启用多个插槽2.2 定义多个插槽2.3 使用多个插槽默认情况下一个组件只能由一个插槽，我们如果要使用多个插槽，需要在组件的js文件中添加options中的multipleSlots将其设置为true

如果 使用lifetimes声明的生命周期函数 与 不使用lifetimes声明的生命周期函数 同时存在，会优先使用 使用lifetimes声明的生命周期函数。在组件中使用 组件所在页面的生命周期函数 比如定义在pageLifetimes节点中。

纯数据字段需要我们手动定义，相比于普通字段，纯数据字段的性能更好。当数据改变的时候，我们可以进行一些操作，相当于数据改变的钩子，可以理解为vue中的watch。properties就是props，是用来接收外部数据的，我们现在给count一个初始值。如果你想在methods中的方法A中调用方法B，那么就在A中写this.B()就行了。在下面的例子中，我们希望data节点中，以_开头的变量都设置为纯数据字段。我们通过props给一个最大值，这样到给的最大值再按按钮也不会+1了。我们做一个点击按钮+1的例子。

在项目根目录下创建components，然后在components中创建 自定义组件名称 的文件夹，然后再自定义组件名称的文件夹中点击 新建Component然后输入自定义组件名称之后就可以得到自定义组件的四个文件打开wxml，发现里面有该组件的路径wxss与页面的wxss一样，都是空的。在js文件中，页面的最外层是page,组件的最外层是components，而且里面的东西也不一样json相对于页面的json多了一个 component:true。

wxs（WeiXin Script）是小程序独有的一套脚本语言，可以理解为 微信的JSwxs与JS有区别，wxs有自己的数据类型，JS基本全是obj，wxs的数据类型有 number,string,boolean,object,function,array,date,regexp（正则类型）wxs在小程序中常做过滤器使用（与两个大括号配合），在别的地方你就别用了。

小程序中的生命周期函数分为两种。

页面导航 是 页面之间的相互跳转，我们在浏览器中可以使用 a链接 与 location.href 进行跳转在小程序中可以使用 声明式导航(navigator标签，类似于a标签) 与 编程式导航(使用小程序导航API，类似于location.href) 来跳转页面。

微信小程序可以请求 HTTPS 类型的接口（HTTP不行），请求之前必须将 接口的域名 添加到 信任列表 中小程序中没有跨域问题，且使用JS原生XML对象发Ajax请求是无效的。

常用的配置项有。

wxss基本满足所有css，并在css的基础上增加了。

wx:key给的值 会直接从 遍历项 中找，如果数据中没有合适的能作为key值的，那么也可以用index，直接写 wx:key="index"我现在比如想给 index 改为 index1,item改为intm1。和其他的前端框架一样，渲染最好加key值，我们现在搞一组数据。在对象中index实质上是key。

hidden的运行方式是给元素添加 display:none 或 display:block。频繁切换时hidden的性能要比wx:if好。wx:if 与 v-if 的运行方式相同，都是 删除与创建元素(不是display:none)现在我不想有外部的view，也就是不想让view1与view2为兄弟关系。hidden无法搭配wx:elif与wx:else。我们现在有一个view套view的页面。当标签满足hidden条件会被隐藏。这个时候可以使用block。

target是触发该事件源头的组件，currentTarget是当前事件所绑定的组件，比如现在有一个父组件包着子组件，你给父组件绑定事件，由于事件委托，子组件也同样被绑定了事件，此时你点击了一下子组件，target是子组件，currentTarget是父组件。我们需要这样传参，使用data-params1传递参数名为params1的参数给dosomething，值为20。使用e.target.dataset.params1拿到参数params1的值。我们搞一个 点击一下按钮+1的例子。

数据写在页面js文件的data中，我们现在在这里定义一条名为username的数据。之后我们在 test.wxml 上用两个大括号就可以使用数据了。也可以用三元表达式，基本上插值表达式的方法都可以用。在AppData中可以看到当前页面的数据情况。如果你看不到的话需要重新编译一下。我们也可以将数据绑定在属性上。

上传完成后可以在小程序管理后台中的 管理->版本管理->开发版本 中看到提交的信息，确认无误后，点击提交审核。除了小程序后台还可以通过 小程序数据助手 查看(小程序数据助手本身就是一个小程序，直接在微信中搜索也可以)删除的时候点那里的删除就行了，如果要修改权限修改后面的复选框就行了。之后就可以进行审核了，我这个估计审核过不了，所以我也就不提交了。可以使用普通的二维码或者下面的小程序码将小程序推荐给别人。里面有项目成员，点击项目成员的编辑就可以添加了。一般来讲小程序的开发流程是这样的。

项目的路径是这样的。

微信小程序开发平台地址。